{"id":157,"date":"2026-10-19T10:56:37","date_gmt":"2026-10-19T15:56:37","guid":{"rendered":"https:\/\/wp.frupex.com\/?page_id=157"},"modified":"2026-11-06T16:26:24","modified_gmt":"2026-11-06T21:26:24","slug":"producto","status":"publish","type":"page","link":"https:\/\/wp.frupex.com\/en\/producto\/","title":{"rendered":"Products"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ==================================================\n   FRUPEX \u00b7 P\u00c1GINA PRODUCTO\n   HERO 01 \u00b7 CENTURY GOTHIC\n   ================================================== *\/\n\n.frx-product-hero,\n.frx-product-hero * {\n  box-sizing: border-box;\n}\n\n.frx-product-hero {\n  --fph-yellow: #F3CB00;\n  --fph-white: #FFFFFF;\n  --fph-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  margin-left: calc(50% - 50vw);\n\n  min-height: 500px;\n  background: #10170C;\n  color: var(--fph-white);\n\n  font-family: var(--fph-font);\n}\n\n.frx-product-hero h1,\n.frx-product-hero p,\n.frx-product-hero span,\n.frx-product-hero a {\n  font-family: var(--fph-font);\n}\n\n\/* ================================================\n   FONDO FOTOGR\u00c1FICO\n   ================================================ *\/\n\n.frx-product-hero__media {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.frx-product-hero__image {\n  position: absolute;\n  inset: -2%;\n\n  background-image: url(\n    \"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Racimo-de-bananos-verdes-en-plantacion-tropical-1.png\"\n  );\n\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: 70% 50%;\n\n  transform: scale(1.025);\n  transform-origin: center;\n}\n\n.frx-product-hero__overlay {\n  position: absolute;\n  inset: 0;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(5, 12, 5, .95) 0%,\n      rgba(5, 12, 5, .88) 26%,\n      rgba(5, 12, 5, .67) 46%,\n      rgba(5, 12, 5, .25) 74%,\n      rgba(5, 12, 5, .08) 100%\n    ),\n    linear-gradient(\n      180deg,\n      rgba(0, 0, 0, .17),\n      transparent 40%,\n      rgba(0, 0, 0, .20)\n    );\n}\n\n\/* ================================================\n   CONTENEDOR\n   ================================================ *\/\n\n.frx-product-hero__inner {\n  position: relative;\n  z-index: 2;\n\n  display: flex;\n  align-items: center;\n\n  width: min(1320px, calc(100% - 10vw));\n  min-height: 500px;\n  margin: 0 auto;\n\n  padding: 115px 0 65px;\n}\n\n.frx-product-hero__content {\n  max-width: 730px;\n  min-width: 0;\n}\n\n\/* ================================================\n   ETIQUETA\n   ================================================ *\/\n\n.frx-product-hero__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  margin-bottom: 22px;\n\n  font-size: 9px;\n  line-height: 1.4;\n  font-weight: 700;\n  letter-spacing: .22em;\n\n  color: rgba(255,255,255,.80);\n}\n\n.frx-product-hero__eyebrow-line {\n  display: block;\n  width: 29px;\n  height: 1px;\n  flex: 0 0 29px;\n\n  background: var(--fph-yellow);\n}\n\n\/* ================================================\n   T\u00cdTULO\n   ================================================ *\/\n\n.frx-product-hero .frx-product-hero__title {\n  margin: 0 !important;\n  padding: 0;\n\n  max-width: 730px;\n\n  font-size: clamp(38px, 4vw, 55px);\n  line-height: 1.20;\n  font-weight: 400;\n  letter-spacing: -.038em;\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-product-hero__title span {\n  color: var(--fph-yellow);\n}\n\n\/* ================================================\n   DESCRIPCI\u00d3N\n   ================================================ *\/\n\n.frx-product-hero .frx-product-hero__description {\n  max-width: 520px;\n  margin: 22px 0 0 !important;\n\n  font-size: 15px;\n  line-height: 1.75;\n  font-weight: 400;\n\n  color: rgba(255,255,255,.90);\n}\n\n\/* ================================================\n   CTA CIRCULAR\n   ================================================ *\/\n\n.frx-product-hero .frx-product-hero__cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 18px;\n\n  margin-top: 30px;\n\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1.4;\n\n  color: #FFFFFF !important;\n  text-decoration: none !important;\n}\n\n.frx-product-hero__cta-circle {\n  display: grid;\n  place-items: center;\n\n  width: 50px;\n  height: 50px;\n  flex: 0 0 50px;\n\n  border-radius: 50%;\n\n  background: var(--fph-yellow);\n  color: #221109;\n\n  font-family: Arial, sans-serif !important;\n  font-size: 22px;\n\n  transition:\n    transform .45s cubic-bezier(.16,1,.3,1),\n    background .35s ease;\n}\n\n.frx-product-hero__cta-text {\n  display: inline-block;\n  border-bottom: 1px solid transparent;\n  padding-bottom: 3px;\n\n  transition: border-color .35s ease;\n}\n\n@media (hover: hover) {\n  .frx-product-hero__cta:hover\n  .frx-product-hero__cta-circle {\n    transform: translateX(5px);\n    background: #FFDA2F;\n  }\n\n  .frx-product-hero__cta:hover\n  .frx-product-hero__cta-text {\n    border-color: rgba(255,255,255,.7);\n  }\n}\n\n.frx-product-hero__cta:focus-visible {\n  outline: 2px solid var(--fph-yellow);\n  outline-offset: 6px;\n}\n\n\/* ================================================\n   DETALLE EDITORIAL DERECHO\n   ================================================ *\/\n\n.frx-product-hero__detail {\n  position: absolute;\n  right: 0;\n  bottom: 38px;\n\n  display: flex;\n  align-items: center;\n  gap: 13px;\n\n  color: rgba(255,255,255,.74);\n\n  font-size: 8px;\n  font-weight: 700;\n  line-height: 1.3;\n  letter-spacing: .17em;\n}\n\n.frx-product-hero__detail i {\n  display: block;\n  width: 28px;\n  height: 1px;\n\n  background: var(--fph-yellow);\n}\n\n\/* ================================================\n   TABLET\n   ================================================ *\/\n\n@media (max-width: 1024px) {\n\n  .frx-product-hero,\n  .frx-product-hero__inner {\n    min-height: 480px;\n  }\n\n  .frx-product-hero__inner {\n    width: calc(100% - 64px);\n    padding: 105px 0 62px;\n  }\n\n  .frx-product-hero__content {\n    max-width: 650px;\n  }\n\n  .frx-product-hero .frx-product-hero__title {\n    font-size: clamp(36px, 5vw, 48px);\n  }\n}\n\n\/* ================================================\n   M\u00d3VIL\n   ================================================ *\/\n\n@media (max-width: 767px) {\n\n  .frx-product-hero,\n  .frx-product-hero__inner {\n    min-height: 550px;\n  }\n\n  .frx-product-hero__inner {\n    width: calc(100% - 38px);\n\n    align-items: flex-end;\n    padding: 115px 0 55px;\n  }\n\n  .frx-product-hero__image {\n    background-position: 66% center;\n  }\n\n  .frx-product-hero__overlay {\n    background:\n      linear-gradient(\n        180deg,\n        rgba(5,12,5,.32) 0%,\n        rgba(5,12,5,.50) 30%,\n        rgba(5,12,5,.80) 62%,\n        rgba(5,12,5,.97) 100%\n      );\n  }\n\n  .frx-product-hero__eyebrow {\n    font-size: 8px;\n    letter-spacing: .12em;\n    margin-bottom: 17px;\n  }\n\n  .frx-product-hero .frx-product-hero__title {\n    font-size: clamp(31px, 8.1vw, 43px);\n    line-height: 1.22;\n  }\n\n  .frx-product-hero .frx-product-hero__description {\n    margin-top: 17px !important;\n\n    font-size: 13.5px;\n    line-height: 1.7;\n  }\n\n  .frx-product-hero .frx-product-hero__cta {\n    margin-top: 25px;\n    gap: 13px;\n    font-size: 12px;\n  }\n\n  .frx-product-hero__cta-circle {\n    width: 45px;\n    height: 45px;\n    flex-basis: 45px;\n  }\n\n  .frx-product-hero__detail {\n    display: none;\n  }\n}\n\n\/* ================================================\n   MOVIMIENTO REDUCIDO\n   ================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .frx-product-hero *,\n  .frx-product-hero *::before,\n  .frx-product-hero *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n.frx-product-hero__cta-circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.frx-product-hero__cta-circle svg {\n  display: block;\n  width: 14px;\n  height: 20px;\n  flex: 0 0 auto;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initProductHero() {\n    const hero = document.querySelector(\".frx-product-hero\");\n\n    if (\n      !hero ||\n      hero.dataset.frxInitialized === \"true\"\n    ) return;\n\n    hero.dataset.frxInitialized = \"true\";\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    if (\n      reducedMotion ||\n      typeof Element.prototype.animate !== \"function\"\n    ) return;\n\n    const image = hero.querySelector(\n      \".frx-product-hero__image\"\n    );\n\n    const eyebrow = hero.querySelector(\n      \".frx-product-hero__eyebrow\"\n    );\n\n    const title = hero.querySelector(\n      \".frx-product-hero__title\"\n    );\n\n    const description = hero.querySelector(\n      \".frx-product-hero__description\"\n    );\n\n    const cta = hero.querySelector(\n      \".frx-product-hero__cta\"\n    );\n\n    const detail = hero.querySelector(\n      \".frx-product-hero__detail\"\n    );\n\n    function reveal(element, delay = 0, y = 17) {\n      if (!element) return;\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    if (image) {\n      image.animate(\n        [\n          { transform: \"scale(1.07)\" },\n          { transform: \"scale(1.025)\" }\n        ],\n        {\n          duration: 1650,\n          easing: \"cubic-bezier(.16,1,.3,1)\"\n        }\n      );\n    }\n\n    reveal(eyebrow, 100, 10);\n    reveal(title, 220, 24);\n    reveal(description, 420, 16);\n    reveal(cta, 570, 13);\n    reveal(detail, 680, 10);\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initProductHero,\n      { once: true }\n    );\n  } else {\n    initProductHero();\n  }\n})();\n<\/script>\n\n<section class=\"frx-product-hero\" id=\"producto-inicio\">\n\n  <div class=\"frx-product-hero__media\" aria-hidden=\"true\">\n    <div class=\"frx-product-hero__image\"><\/div>\n    <div class=\"frx-product-hero__overlay\"><\/div>\n  <\/div>\n\n  <div class=\"frx-product-hero__inner\">\n\n    <div class=\"frx-product-hero__content\">\n\n      <div class=\"frx-product-hero__eyebrow\">\n\n        <span>FRUPEX \u00b7 BANANO DE EXPORTACI\u00d3N<\/span>\n      <\/div>\n\n      <h1 class=\"frx-product-hero__title\">\n        Un banano<br>\n        para <span><strong>cada mercado.<\/strong><\/span>\n      <\/h1>\n\n      <p class=\"frx-product-hero__description\">\n        Calidad, frescura y consistencia en cada caja,\n        desde el campo ecuatoriano al mundo.\n      <\/p>\n\n      <a href=\"#nuestras-variedades\" class=\"frx-product-hero__cta\">\n\n        <span class=\"frx-product-hero__cta-circle\" 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\n        <span class=\"frx-product-hero__cta-text\">\n          Conoce nuestros productos\n        <\/span>\n\n      <\/a>\n\n    <\/div>\n\n <\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =====================================================\n   FRUPEX \u2014 NUESTRAS VARIEDADES V7\n   Century Gothic | SWEET LAND\n   Apertura premium + zoom + fondo degradado\n   ===================================================== *\/\n\n.frupex-varieties,\n.frupex-varieties * {\n  box-sizing: border-box;\n}\n\n.frupex-varieties {\n  --fv-yellow: #F3CB00;\n  --fv-brown: #5F2610;\n  --fv-dark: #221109;\n  --fv-gray: #6E625A;\n  --fv-cream: #F7F4EF;\n  --fv-font: \"Century Gothic\", \"CenturyGothic\",\n             Arial, sans-serif;\n\n  position: relative;\n  isolation: isolate;\n  width: 100%;\n\n  margin: 0;\n  padding: 72px 0 84px;\n\n  background: var(--fv-cream);\n  color: var(--fv-dark);\n  font-family: var(--fv-font);\n}\n\n.frupex-varieties h2,\n.frupex-varieties h3,\n.frupex-varieties p,\n.frupex-varieties li,\n.frupex-varieties a,\n.frupex-varieties button,\n.frupex-varieties span {\n  font-family: var(--fv-font);\n}\n\n.frupex-varieties__inner {\n  width: min(1240px, calc(100% - 10vw));\n  margin: 0 auto;\n}\n\n\/* =====================================================\n   ENCABEZADO\n   ===================================================== *\/\n\n.frupex-varieties__heading {\n  max-width: 850px;\n  margin: 0 0 36px;\n  padding: 0;\n}\n\n.frupex-varieties__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 13px;\n\n  margin-bottom: 17px;\n\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1.4;\n  letter-spacing: .20em;\n\n  color: var(--fv-brown);\n}\n\n.frupex-varieties__eyebrow i {\n  display: block;\n  flex: 0 0 40px;\n\n  width: 40px;\n  height: 1px;\n\n  background: var(--fv-yellow);\n}\n\n.frupex-varieties .frupex-varieties__title {\n  margin: 0 0 15px !important;\n  padding: 0;\n\n  font-size: clamp(30px, 3.1vw, 43px);\n  font-weight: 400;\n  line-height: 1.23;\n  letter-spacing: -.035em;\n\n  color: var(--fv-dark);\n  text-align: left;\n  text-transform: none;\n\n  word-break: normal;\n  hyphens: none;\n}\n\n.frupex-varieties__title span {\n  color: var(--fv-yellow);\n}\n\n.frupex-varieties .frupex-varieties__intro {\n  max-width: 800px;\n  margin: 0 !important;\n\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.8;\n\n  color: var(--fv-gray);\n}\n\n\/* =====================================================\n   RET\u00cdCULA DE DOS TARJETAS\n   ===================================================== *\/\n\n.frupex-varieties__grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  align-items: stretch;\n\n  gap: 24px;\n}\n\n\/* =====================================================\n   TARJETAS PREMIUM\n   ===================================================== *\/\n\n.frupex-varieties .frupex-variety-card {\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n\n  min-width: 0;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  overflow: visible;\n\n  border: 1px solid rgba(95,38,16,.085);\n  border-radius: 14px;\n\n  background: #FCFAF6;\n\n  box-shadow:\n    0 10px 30px rgba(34,17,9,.045);\n\n  transform: translateY(0) scale(1);\n\n  transition:\n    transform .8s cubic-bezier(.22,1,.36,1),\n    box-shadow .8s cubic-bezier(.22,1,.36,1),\n    border-color .5s ease;\n}\n\n.frupex-varieties\n.frupex-variety-card--organic {\n  background: #FDFBF7;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .frupex-varieties .frupex-variety-card:hover {\n    transform: translateY(-5px) scale(1.008);\n\n    box-shadow:\n      0 22px 48px rgba(34,17,9,.095);\n\n    border-color: rgba(95,38,16,.17);\n  }\n}\n\n.frupex-varieties\n.frupex-variety-card.is-open {\n  border-color: rgba(243,203,0,.45);\n}\n\n\/* =====================================================\n   ZONA VISUAL\n\n   La zona tiene aire arriba para que la\n   cubierta se eleve sin tapar el banano.\n   ===================================================== *\/\n\n.frupex-variety-card__visual {\n  position: relative;\n\n  width: 100%;\n  height: 435px;\n  min-width: 0;\n\n  flex: 0 0 auto;\n  overflow: visible;\n}\n\n\/* =====================================================\n   RECUADRO DEGRADADO DETR\u00c1S DE LAS CAJAS\n   ===================================================== *\/\n\n.frupex-variety-card__backdrop {\n  position: absolute;\n  z-index: 0;\n\n  top: 17%;\n  right: 12%;\n  bottom: 11%;\n  left: 12%;\n\n  border-radius: 25px;\n\n  background:\n    radial-gradient(\n      ellipse at 50% 72%,\n      rgba(215,204,186,.48) 0%,\n      rgba(242,237,228,.28) 54%,\n      rgba(255,255,255,.05) 100%\n    );\n\n  box-shadow:\n    inset 0 1px 8px rgba(95,38,16,.025);\n\n  pointer-events: none;\n\n  transition:\n    transform .85s cubic-bezier(.22,1,.36,1),\n    opacity .65s ease;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .frupex-variety-card:hover\n  .frupex-variety-card__backdrop {\n    transform: scale(1.025);\n  }\n}\n\n\/* =====================================================\n   ESCENARIO: ZOOM DEL CONJUNTO\n   ===================================================== *\/\n\n.frupex-variety-card__stage {\n  --fv-zoom: 1;\n\n  position: absolute;\n  z-index: 2;\n\n  left: 50%;\n  bottom: 20px;\n\n  width: min(69%, 400px);\n  aspect-ratio: 1.25 \/ 1;\n\n  overflow: visible;\n\n  transform:\n    translateX(-50%)\n    scale(var(--fv-zoom));\n\n  transform-origin: 50% 77%;\n\n  transition:\n    transform .95s cubic-bezier(.22,1,.36,1);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .frupex-variety-card:hover\n  .frupex-variety-card__stage {\n    --fv-zoom: 1.035;\n  }\n}\n\n.frupex-variety-card.is-open\n.frupex-variety-card__stage {\n  --fv-zoom: 1.035;\n}\n\n\/* =====================================================\n   CAPAS DE IMAGEN\n\n   Ambas comparten el mismo marco.\n   ===================================================== *\/\n\n.frupex-variety-card__base,\n.frupex-variety-card__cover {\n  position: absolute;\n\n  left: 0;\n  bottom: 0;\n\n  display: block;\n  width: 100%;\n  height: 100%;\n\n  object-fit: contain;\n  object-position: center bottom;\n\n  user-select: none;\n  -webkit-user-drag: none;\n\n  backface-visibility: hidden;\n}\n\n\/* CAJA CON BANANAS: FIJA *\/\n\n.frupex-variety-card__base {\n  z-index: 1;\n\n  transform: none;\n\n  filter:\n    drop-shadow(0 14px 15px rgba(34,17,9,.14));\n}\n\n\/* CUBIERTA SWEET LAND: MOVIMIENTO *\/\n\n.frupex-variety-card__cover {\n  z-index: 3;\n\n  transform:\n    translate3d(0,0,0)\n    rotate(0deg)\n    scale(1);\n\n  transform-origin: 50% 65%;\n\n  filter:\n    drop-shadow(0 10px 12px rgba(34,17,9,.09));\n\n  transition:\n    transform 1.1s cubic-bezier(.22,1,.36,1),\n    filter .9s cubic-bezier(.22,1,.36,1);\n\n  will-change: transform;\n  pointer-events: none;\n}\n\n\/* =====================================================\n   APERTURA ELEGANTE\n\n   La cubierta se mueve diagonalmente.\n   El cart\u00f3n y las bananas quedan visibles.\n   ===================================================== *\/\n\n@media (hover: hover) and (pointer: fine) {\n  .frupex-variety-card:hover\n  .frupex-variety-card__cover {\n    transform:\n      translate3d(24%,-38%,0)\n      rotate(-5deg)\n      scale(.86);\n\n    filter:\n      drop-shadow(\n        0 24px 20px rgba(34,17,9,.19)\n      );\n  }\n}\n\n\/* CLIC \/ TOQUE *\/\n\n.frupex-variety-card.is-open\n.frupex-variety-card__cover {\n  transform:\n    translate3d(24%,-38%,0)\n    rotate(-5deg)\n    scale(.86);\n\n  filter:\n    drop-shadow(\n      0 24px 20px rgba(34,17,9,.19)\n    );\n}\n\n\/* =====================================================\n   CONTROL PEQUE\u00d1O ABRIR \/ CERRAR\n   ===================================================== *\/\n\n.frupex-varieties\n.frupex-variety-card__toggle {\n  position: absolute;\n  z-index: 5;\n\n  right: 16px;\n  bottom: 12px;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 7px;\n\n  min-height: 31px;\n  padding: 7px 11px;\n\n  border: 1px solid rgba(95,38,16,.16);\n  border-radius: 30px;\n\n  background: rgba(255,255,255,.94);\n  color: var(--fv-brown);\n\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1.2;\n\n  box-shadow: none;\n  cursor: pointer;\n\n  transition:\n    background .3s ease,\n    border-color .3s ease;\n}\n\n.frupex-variety-card__toggle-icon {\n  font-family: Arial, sans-serif !important;\n  font-size: 15px;\n  line-height: 1;\n}\n\n.frupex-varieties\n.frupex-variety-card__toggle:hover,\n.frupex-varieties\n.frupex-variety-card.is-open\n.frupex-variety-card__toggle {\n  background: #FFF6D1;\n  border-color: var(--fv-yellow);\n}\n\n\/* =====================================================\n   INFORMACI\u00d3N INFERIOR\n   ===================================================== *\/\n\n.frupex-variety-card__body {\n  position: relative;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n\n  flex: 1;\n  min-width: 0;\n\n  padding: 16px 27px 27px;\n}\n\n.frupex-variety-card__category {\n  display: block;\n  margin: 0 0 9px;\n\n  font-size: 9px;\n  font-weight: 700;\n  line-height: 1.5;\n  letter-spacing: .14em;\n\n  color: rgba(95,38,16,.68);\n}\n\n.frupex-varieties\n.frupex-variety-card__title {\n  margin: 0 0 13px !important;\n  padding: 0;\n\n  font-size: clamp(20px, 2vw, 26px);\n  font-weight: 400;\n  line-height: 1.3;\n  letter-spacing: -.025em;\n\n  color: var(--fv-dark);\n\n  text-align: left;\n  text-transform: none;\n  word-break: normal;\n  hyphens: none;\n}\n\n\/* FORMATOS DISPONIBLES *\/\n\n.frupex-variety-card__list {\n  display: grid;\n  gap: 7px;\n\n  width: 100%;\n  list-style: none !important;\n\n  margin: 0 0 25px !important;\n  padding: 0 !important;\n}\n\n.frupex-variety-card__list li {\n  margin: 0 !important;\n  padding: 0 !important;\n\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.55;\n\n  color: var(--fv-gray);\n}\n\n\/* =====================================================\n   BOT\u00d3N DE CONTACTO \u2014 MARR\u00d3N COMPACTO\n   ===================================================== *\/\n\n.frupex-varieties\n.frupex-variety-card__cta {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 22px;\n\n  min-height: 43px;\n  margin-top: auto;\n  padding: 0 15px 0 17px;\n\n  border: 1px solid var(--fv-brown);\n  border-radius: 4px;\n\n  background: var(--fv-brown);\n  color: #FFFFFF !important;\n\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1.3;\n\n  text-decoration: none !important;\n\n  transition:\n    background .35s ease,\n    border-color .35s ease,\n    color .35s ease,\n    transform .35s ease;\n}\n\n.frupex-varieties\n.frupex-variety-card__cta span {\n  color: inherit !important;\n  text-decoration: none !important;\n}\n\n.frupex-variety-card__cta-arrow {\n  font-family: Arial, sans-serif !important;\n  font-size: 18px;\n  line-height: 1;\n\n  transition: transform .35s ease;\n}\n\n@media (hover: hover) {\n  .frupex-varieties\n  .frupex-variety-card__cta:hover {\n    background: var(--fv-yellow);\n    border-color: var(--fv-yellow);\n    color: var(--fv-dark) !important;\n\n    transform: translateY(-2px);\n  }\n\n  .frupex-variety-card__cta:hover\n  .frupex-variety-card__cta-arrow {\n    transform: translateX(4px);\n  }\n}\n\n\/* FOCO ACCESIBLE *\/\n\n.frupex-variety-card__cta:focus-visible,\n.frupex-variety-card__toggle:focus-visible {\n  outline: 2px solid var(--fv-yellow);\n  outline-offset: 4px;\n}\n\n\/* =====================================================\n   TABLET\n   ===================================================== *\/\n\n@media (max-width: 1050px) {\n  .frupex-varieties__inner {\n    width: calc(100% - 64px);\n  }\n\n  .frupex-variety-card__visual {\n    height: 385px;\n  }\n\n  .frupex-variety-card__stage {\n    width: min(72%, 355px);\n  }\n\n  .frupex-variety-card__body {\n    padding: 15px 21px 25px;\n  }\n}\n\n\/* =====================================================\n   M\u00d3VIL\n   ===================================================== *\/\n\n@media (max-width: 767px) {\n  .frupex-varieties {\n    padding: 55px 0 64px;\n  }\n\n  .frupex-varieties__inner {\n    width: calc(100% - 38px);\n  }\n\n  .frupex-varieties__heading {\n    margin-bottom: 28px;\n  }\n\n  .frupex-varieties__eyebrow {\n    font-size: 9px;\n  }\n\n  .frupex-varieties\n  .frupex-varieties__title {\n    font-size: clamp(29px, 7.2vw, 37px);\n  }\n\n  .frupex-varieties\n  .frupex-varieties__intro {\n    font-size: 13.5px;\n    line-height: 1.75;\n  }\n\n  .frupex-varieties__grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n\n  .frupex-variety-card__visual {\n    height: clamp(300px, 92vw, 415px);\n  }\n\n  .frupex-variety-card__stage {\n    width: min(70%, 335px);\n    bottom: 15px;\n  }\n\n  .frupex-variety-card__backdrop {\n    left: 9%;\n    right: 9%;\n    top: 18%;\n    bottom: 10%;\n  }\n\n  .frupex-variety-card__body {\n    padding: 14px 21px 25px;\n  }\n\n  .frupex-varieties\n  .frupex-variety-card__title {\n    font-size: 23px;\n  }\n\n  .frupex-variety-card__list li {\n    font-size: 12.5px;\n  }\n\n  .frupex-variety-card.is-open\n  .frupex-variety-card__cover {\n    transform:\n      translate3d(19%,-34%,0)\n      rotate(-4deg)\n      scale(.86);\n  }\n}\n\n\/* =====================================================\n   MOVIMIENTO REDUCIDO\n   ===================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n  .frupex-varieties *,\n  .frupex-varieties *::before,\n  .frupex-varieties *::after {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n\n\/* Ocultar bot\u00f3n Abrir caja *\/\n.frupex-variety-card__toggle {\n  display: none !important;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFrupexVarieties() {\n    const section = document.querySelector(\n      \".frupex-varieties\"\n    );\n\n    if (\n      !section ||\n      section.dataset.fvInitialized === \"true\"\n    ) {\n      return;\n    }\n\n    section.dataset.fvInitialized = \"true\";\n\n    const cards = Array.from(\n      section.querySelectorAll(\n        \".frupex-variety-card\"\n      )\n    );\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    function setOpen(card, isOpen) {\n      const button = card.querySelector(\n        \".frupex-variety-card__toggle\"\n      );\n\n      const label = button?.querySelector(\n        \".frupex-variety-card__toggle-text\"\n      );\n\n      const icon = button?.querySelector(\n        \".frupex-variety-card__toggle-icon\"\n      );\n\n      const product = card.classList.contains(\n        \"frupex-variety-card--organic\"\n      ) ? \"org\u00e1nico\" : \"convencional\";\n\n      card.classList.toggle(\"is-open\", isOpen);\n\n      if (button) {\n        button.setAttribute(\n          \"aria-pressed\",\n          String(isOpen)\n        );\n\n        button.setAttribute(\n          \"aria-label\",\n          `${isOpen ? \"Cerrar\" : \"Abrir\"} caja de banano ${product}`\n        );\n      }\n\n      if (label) {\n        label.textContent = isOpen\n          ? \"Cerrar caja\"\n          : \"Abrir caja\";\n      }\n\n      if (icon) {\n        icon.textContent = isOpen ? \"\u2199\" : \"\u2197\";\n      }\n    }\n\n    function closeAll(except = null) {\n      cards.forEach((card) => {\n        if (card !== except) {\n          setOpen(card, false);\n        }\n      });\n    }\n\n    \/* APERTURA Y CIERRE POR BOT\u00d3N *\/\n\n    cards.forEach((card) => {\n      const button = card.querySelector(\n        \".frupex-variety-card__toggle\"\n      );\n\n      if (!button) return;\n\n      button.addEventListener(\"click\", () => {\n        const nextOpen = !card.classList.contains(\n          \"is-open\"\n        );\n\n        closeAll(card);\n        setOpen(card, nextOpen);\n      });\n    });\n\n    \/* CERRAR AL TOCAR FUERA *\/\n\n    document.addEventListener(\n      \"pointerdown\",\n      (event) => {\n        if (section.contains(event.target)) {\n          return;\n        }\n\n        closeAll();\n      }\n    );\n\n    \/* CERRAR CON ESCAPE *\/\n\n    document.addEventListener(\n      \"keydown\",\n      (event) => {\n        if (event.key !== \"Escape\") return;\n\n        const activeCard = cards.find(\n          (card) => card.classList.contains(\"is-open\")\n        );\n\n        closeAll();\n\n        const activeButton = activeCard?.querySelector(\n          \".frupex-variety-card__toggle\"\n        );\n\n        if (activeButton) {\n          activeButton.focus();\n        }\n      }\n    );\n\n    \/* MOVIMIENTO REDUCIDO *\/\n\n    if (reducedMotion) {\n      section.classList.add(\n        \"frupex-varieties--reduced-motion\"\n      );\n    }\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFrupexVarieties,\n      { once: true }\n    );\n  } else {\n    initFrupexVarieties();\n  }\n})();\n<\/script>\n\n<section class=\"frupex-varieties\" id=\"nuestras-variedades\">\n  <div class=\"frupex-varieties__inner\">\n\n    <!-- ENCABEZADO -->\n    <header class=\"frupex-varieties__heading\">\n      <div class=\"frupex-varieties__eyebrow\">\n        <span>NUESTRAS VARIEDADES<\/span>\n             <\/div>\n\n      <h2 class=\"frupex-varieties__title\">\n        Nuestras variedades<span>.<\/span>\n      <\/h2>\n\n      <p class=\"frupex-varieties__intro\">\n        Ofrecemos banano de alto est\u00e1ndar, con trazabilidad,\n        control de calidad y presentaci\u00f3n adaptada a los\n        requerimientos de cada mercado.\n      <\/p>\n    <\/header>\n\n    <div class=\"frupex-varieties__grid\">\n\n      <!-- CONVENCIONAL \/ CAJA VERDE -->\n      <article class=\"frupex-variety-card frupex-variety-card--conventional\">\n\n        <div class=\"frupex-variety-card__visual\">\n          <div class=\"frupex-variety-card__backdrop\" aria-hidden=\"true\"><\/div>\n\n          <div class=\"frupex-variety-card__stage\">\n            <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/CAJA-DE-BANANO.png\" alt=\"Caja abierta con bananos de exportaci\u00f3n\" class=\"frupex-variety-card__base\" loading=\"lazy\" draggable=\"false\">\n\n            <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/TAPA-DE-CAJA-BANAO-CONVENCIONAL.png\" alt=\"Cubierta verde SWEET LAND para banano convencional\" class=\"frupex-variety-card__cover\" loading=\"lazy\" draggable=\"false\">\n          <\/div>\n\n          <button class=\"frupex-variety-card__toggle\" type=\"button\" aria-pressed=\"false\" aria-label=\"Abrir caja de banano convencional\">\n            <span class=\"frupex-variety-card__toggle-icon\" aria-hidden=\"true\">\u2197<\/span>\n            <span class=\"frupex-variety-card__toggle-text\">Abrir caja<\/span>\n          <\/button>\n        <\/div>\n\n        <div class=\"frupex-variety-card__body\">\n          <span class=\"frupex-variety-card__category\">\n            PRESENTACI\u00d3N DE EXPORTACI\u00d3N\n          <\/span>\n\n          <h3 class=\"frupex-variety-card__title\">\n            Banano Convencional\n          <\/h3>\n\n          <ul class=\"frupex-variety-card__list\">\n            <li>Caja de 31 lb 208<\/li>\n            <li>Caja de 41.5 lb 22XU<\/li>\n            <li>Caja de 43 lb 22XU<\/li>\n          <\/ul>\n\n          <a href=\"\/contacto\/\" class=\"frupex-variety-card__cta\" aria-label=\"Solicitar informaci\u00f3n sobre banano org\u00e1nico\">\n  <span>Solicitar informaci\u00f3n<\/span>\n\n  <span class=\"frupex-variety-card__cta-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=\"currentColor\"><\/path>\n    <\/svg>\n  <\/span>\n<\/a>\n          \n        <\/div>\n\n      <\/article>\n\n      <!-- ORG\u00c1NICO \/ CAJA AMARILLA -->\n      <article class=\"frupex-variety-card frupex-variety-card--organic\">\n\n        <div class=\"frupex-variety-card__visual\">\n          <div class=\"frupex-variety-card__backdrop\" aria-hidden=\"true\"><\/div>\n\n          <div class=\"frupex-variety-card__stage\">\n            <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/CAJA-DE-BANANO.png\" alt=\"Caja abierta con bananos de exportaci\u00f3n\" class=\"frupex-variety-card__base\" loading=\"lazy\" draggable=\"false\">\n\n            <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/TAPA-DE-CAJA-BANANO-ORGANICO.png\" alt=\"Cubierta amarilla SWEET LAND para banano org\u00e1nico\" class=\"frupex-variety-card__cover\" loading=\"lazy\" draggable=\"false\">\n          <\/div>\n\n          <button class=\"frupex-variety-card__toggle\" type=\"button\" aria-pressed=\"false\" aria-label=\"Abrir caja de banano org\u00e1nico\">\n            <span class=\"frupex-variety-card__toggle-icon\" aria-hidden=\"true\">\u2197<\/span>\n            <span class=\"frupex-variety-card__toggle-text\">Abrir caja<\/span>\n          <\/button>\n        <\/div>\n\n        <div class=\"frupex-variety-card__body\">\n          <span class=\"frupex-variety-card__category\">\n            PRESENTACI\u00d3N DE EXPORTACI\u00d3N\n          <\/span>\n\n          <h3 class=\"frupex-variety-card__title\">\n            Banano Org\u00e1nico\n          <\/h3>\n\n          <ul class=\"frupex-variety-card__list\">\n            <li>Caja de 41.5 lb 22XU<\/li>\n            <li>Caja de 43.5 lb 22XU<\/li>\n          <\/ul>\n\n          <a href=\"\/contacto\/\" class=\"frupex-variety-card__cta\" aria-label=\"Solicitar informaci\u00f3n sobre banano org\u00e1nico\">\n  <span>Solicitar informaci\u00f3n<\/span>\n\n  <span class=\"frupex-variety-card__cta-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=\"currentColor\"><\/path>\n    <\/svg>\n  <\/span>\n<\/a>\n      <\/div><\/article>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ======================================================\n   FRUPEX | PRODUCTO | MERCADOS V1\n   Century Gothic \u00b7 Cinematogr\u00e1fico compacto\n   ====================================================== *\/\n\n.frx-market-banner,\n.frx-market-banner * {\n  box-sizing: border-box;\n}\n\n.frx-market-banner {\n  --fmb-yellow: #F3CB00;\n  --fmb-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: 320px;\n  margin: 0;\n  padding: 0;\n\n  background: #181709;\n  color: #FFFFFF;\n  font-family: var(--fmb-font);\n}\n\n.frx-market-banner h2,\n.frx-market-banner p,\n.frx-market-banner span {\n  font-family: var(--fmb-font);\n}\n\n\/* ============================================\n   IMAGEN\n   ============================================ *\/\n\n.frx-market-banner__media {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.frx-market-banner__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: 65% 50%;\n\n  transform: scale(1.025);\n  transform-origin: center center;\n\n  filter: saturate(.95) contrast(1.035);\n}\n\n\/* OSCURECIMIENTO A LA IZQUIERDA *\/\n\n.frx-market-banner__overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(8,8,5,.91) 0%,\n      rgba(8,8,5,.81) 23%,\n      rgba(8,8,5,.57) 43%,\n      rgba(8,8,5,.17) 72%,\n      rgba(8,8,5,.07) 100%\n    ),\n    linear-gradient(\n      180deg,\n      rgba(8,8,5,.12),\n      transparent 35%,\n      rgba(8,8,5,.18)\n    );\n}\n\n\/* LUZ DORADA DISCRETA *\/\n\n.frx-market-banner__glow {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n\n  pointer-events: none;\n\n  background: radial-gradient(\n    ellipse at 73% 42%,\n    rgba(243,203,0,.11),\n    transparent 55%\n  );\n}\n\n\/* ============================================\n   CONTENEDOR\n   ============================================ *\/\n\n.frx-market-banner__inner {\n  position: relative;\n  z-index: 3;\n\n  display: flex;\n  align-items: center;\n\n  width: min(1300px, calc(100% - 10vw));\n  min-height: 320px;\n  margin: 0 auto;\n\n  padding: 58px 0;\n}\n\n.frx-market-banner__content {\n  position: relative;\n  width: 100%;\n  max-width: 660px;\n  min-width: 0;\n}\n\n\/* ============================================\n   ETIQUETA SUPERIOR\n   ============================================ *\/\n\n.frx-market-banner__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  margin-bottom: 20px;\n\n  color: rgba(255,255,255,.78);\n\n  font-size: 9px;\n  line-height: 1.4;\n  font-weight: 700;\n  letter-spacing: .19em;\n  text-transform: uppercase;\n}\n\n.frx-market-banner__eyebrow-line {\n  display: block;\n  flex: 0 0 29px;\n\n  width: 29px;\n  height: 1px;\n\n  background: var(--fmb-yellow);\n}\n\n\/* ============================================\n   T\u00cdTULO\n   ============================================ *\/\n\n.frx-market-banner .frx-market-banner__title {\n  margin: 0 !important;\n  padding: 0;\n\n  max-width: 660px;\n\n  color: #FFFFFF;\n\n  font-size: clamp(31px, 3.2vw, 45px);\n  font-weight: 400;\n  line-height: 1.22;\n  letter-spacing: -.035em;\n\n  text-align: left;\n  text-transform: none;\n\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: none;\n}\n\n.frx-market-banner__title span {\n  color: var(--fmb-yellow);\n}\n\n\/* ============================================\n   DESCRIPCI\u00d3N\n   ============================================ *\/\n\n.frx-market-banner .frx-market-banner__description {\n  max-width: 540px;\n  margin: 20px 0 0 !important;\n\n  color: rgba(255,255,255,.89);\n\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.75;\n  letter-spacing: -.005em;\n}\n\n\/* ============================================\n   DETALLE EDITORIAL\n   ============================================ *\/\n\n.frx-market-banner__detail {\n  position: absolute;\n  right: 0;\n  bottom: 24px;\n\n  display: flex;\n  align-items: center;\n  gap: 11px;\n\n  color: rgba(255,255,255,.72);\n\n  font-size: 8px;\n  font-weight: 700;\n  letter-spacing: .16em;\n  line-height: 1.3;\n}\n\n.frx-market-banner__detail i {\n  width: 27px;\n  height: 1px;\n  background: var(--fmb-yellow);\n}\n\n\/* ============================================\n   TABLET\n   ============================================ *\/\n\n@media (max-width: 1050px) {\n  .frx-market-banner__inner {\n    width: calc(100% - 64px);\n  }\n\n  .frx-market-banner__content {\n    max-width: 590px;\n  }\n\n  .frx-market-banner .frx-market-banner__title {\n    font-size: clamp(30px, 4vw, 41px);\n  }\n\n  .frx-market-banner__image {\n    object-position: 70% center;\n  }\n}\n\n\/* ============================================\n   M\u00d3VIL\n   ============================================ *\/\n\n@media (max-width: 767px) {\n  .frx-market-banner {\n    min-height: 390px;\n  }\n\n  .frx-market-banner__inner {\n    width: calc(100% - 38px);\n    min-height: 390px;\n\n    align-items: flex-end;\n    padding: 82px 0 48px;\n  }\n\n  \/* Conserva m\u00e1s bananos en la derecha *\/\n  .frx-market-banner__image {\n    object-position: 72% center;\n  }\n\n  .frx-market-banner__overlay {\n    background:\n      linear-gradient(\n        90deg,\n        rgba(9,8,4,.82) 0%,\n        rgba(9,8,4,.63) 60%,\n        rgba(9,8,4,.30) 100%\n      ),\n      linear-gradient(\n        0deg,\n        rgba(9,8,4,.84) 0%,\n        rgba(9,8,4,.45) 52%,\n        rgba(9,8,4,.12) 100%\n      );\n  }\n\n  .frx-market-banner__eyebrow {\n    margin-bottom: 17px;\n    gap: 9px;\n\n    font-size: 8px;\n    letter-spacing: .12em;\n  }\n\n  .frx-market-banner__eyebrow-line {\n    width: 21px;\n    flex-basis: 21px;\n  }\n\n  .frx-market-banner .frx-market-banner__title {\n    font-size: clamp(28px, 7.3vw, 38px);\n    line-height: 1.24;\n  }\n\n  .frx-market-banner .frx-market-banner__description {\n    max-width: 430px;\n    margin-top: 17px !important;\n\n    font-size: 13px;\n    line-height: 1.7;\n  }\n\n  .frx-market-banner__detail {\n    display: none;\n  }\n}\n\n\/* ============================================\n   ACCESIBILIDAD\n   ============================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n  .frx-market-banner *,\n  .frx-market-banner *::before,\n  .frx-market-banner *::after {\n    animation: none !important;\n    transition: none !important;\n    transform: none !important;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFrupexMarketBanner() {\n    const section = document.querySelector(\n      \".frx-market-banner\"\n    );\n\n    if (\n      !section ||\n      section.dataset.fmbInitialized === \"true\"\n    ) return;\n\n    section.dataset.fmbInitialized = \"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-market-banner__image\"\n    );\n\n    const eyebrow = section.querySelector(\n      \".frx-market-banner__eyebrow\"\n    );\n\n    const title = section.querySelector(\n      \".frx-market-banner__title\"\n    );\n\n    const description = section.querySelector(\n      \".frx-market-banner__description\"\n    );\n\n    const detail = section.querySelector(\n      \".frx-market-banner__detail\"\n    );\n\n    let played = false;\n\n    function reveal(element, delay = 0, distance = 15) {\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: 850,\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      if (image) {\n        image.animate(\n          [\n            { transform: \"scale(1.075)\" },\n            { transform: \"scale(1.025)\" }\n          ],\n          {\n            duration: 1600,\n            easing: \"cubic-bezier(.16,1,.3,1)\",\n            fill: \"forwards\"\n          }\n        );\n      }\n\n      reveal(eyebrow, 80, 11);\n      reveal(title, 190, 20);\n      reveal(description, 370, 14);\n      reveal(detail, 480, 10);\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 -25px 0px\"\n      }\n    );\n\n    observer.observe(section);\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFrupexMarketBanner,\n      { once: true }\n    );\n  } else {\n    initFrupexMarketBanner();\n  }\n})();\n<\/script>\n\n<section class=\"frx-market-banner\" id=\"mercados-frupex\">\n\n  <!-- FOTOGRAF\u00cdA -->\n  <div class=\"frx-market-banner__media\" aria-hidden=\"true\">\n    <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/bananos-mano-scaled.jpg\" alt=\"\" class=\"frx-market-banner__image\" loading=\"lazy\">\n\n    <div class=\"frx-market-banner__overlay\"><\/div>\n    <div class=\"frx-market-banner__glow\"><\/div>\n  <\/div>\n\n  <!-- CONTENIDO -->\n  <div class=\"frx-market-banner__inner\">\n\n    <div class=\"frx-market-banner__content\">\n\n      <div class=\"frx-market-banner__eyebrow\">\n       \n        <span>SOLUCIONES PARA CADA MERCADO<\/span>\n      <\/div>\n\n      <h2 class=\"frx-market-banner__title\">\n        <strong>Respuesta a las<br>\n        <span>necesidades del mercado.<\/span>\n      <\/h2>\n\n      <p class=\"frx-market-banner__description\">\n        Trabajamos con especificaciones personalizadas\n        para cumplir con los est\u00e1ndares de nuestros\n        clientes en diferentes pa\u00edses.\n      <\/p>\n\n    <\/div>\n\n    \n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ===================================================\n   FRUPEX \u2014 PRESENTACI\u00d3N Y EMPAQUE V1\n   Century Gothic \u00b7 Editorial compacto\n   =================================================== *\/\n\n.frx-packaging,\n.frx-packaging * {\n  box-sizing: border-box;\n}\n\n.frx-packaging {\n  --pk-yellow: #F3CB00;\n  --pk-brown: #5F2610;\n  --pk-dark: #221109;\n  --pk-gray: #6E625A;\n  --pk-cream: #F7F4EF;\n  --pk-font: \"Century Gothic\", \"CenturyGothic\",\n             Arial, sans-serif;\n\n  position: relative;\n  isolation: isolate;\n  width: 100%;\n\n  padding: 70px 0 79px;\n  overflow: hidden;\n\n  background: #FBF9F5;\n  color: var(--pk-dark);\n  font-family: var(--pk-font);\n}\n\n.frx-packaging h2,\n.frx-packaging h3,\n.frx-packaging p,\n.frx-packaging span {\n  font-family: var(--pk-font);\n}\n\n\/* CONTENEDOR *\/\n\n.frx-packaging__inner {\n  width: min(1240px, calc(100% - 10vw));\n  margin: 0 auto;\n}\n\n\/* ===================================================\n   ENCABEZADO\n   =================================================== *\/\n\n.frx-packaging__heading {\n  max-width: 740px;\n  margin-bottom: 34px;\n}\n\n.frx-packaging__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 13px;\n\n  margin-bottom: 16px;\n\n  color: var(--pk-brown);\n  font-size: 10px;\n  line-height: 1.4;\n  font-weight: 700;\n  letter-spacing: .20em;\n}\n\n.frx-packaging__eyebrow i {\n  width: 40px;\n  height: 1px;\n  flex: 0 0 40px;\n  background: var(--pk-yellow);\n}\n\n.frx-packaging .frx-packaging__title {\n  margin: 0 0 15px !important;\n  padding: 0;\n\n  color: var(--pk-dark);\n\n  font-size: clamp(30px, 3.1vw, 42px);\n  font-weight: 400;\n  line-height: 1.24;\n  letter-spacing: -.035em;\n\n  text-align: left;\n  text-transform: none;\n  word-break: normal;\n  hyphens: none;\n}\n\n.frx-packaging__title span {\n  color: var(--pk-yellow);\n}\n\n.frx-packaging .frx-packaging__intro {\n  max-width: 690px;\n  margin: 0 !important;\n\n  color: var(--pk-gray);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.8;\n}\n\n\/* ===================================================\n   CUATRO COLUMNAS\n   =================================================== *\/\n\n.frx-packaging__grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  align-items: start;\n  gap: 20px;\n}\n\n.frx-packaging__item {\n  min-width: 0;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n\/* ===================================================\n   FOTOGRAF\u00cdAS\n   =================================================== *\/\n\n.frx-packaging__photo {\n  position: relative;\n  isolation: isolate;\n\n  width: 100%;\n  aspect-ratio: 16 \/ 10;\n\n  overflow: hidden;\n  border-radius: 9px;\n\n  background:\n    linear-gradient(135deg, #E7E0D4, #D9CFBF);\n\n  box-shadow:\n    0 10px 24px rgba(34,17,9,.055);\n\n  transition:\n    box-shadow .5s ease,\n    transform .6s cubic-bezier(.16,1,.3,1);\n}\n\n.frx-packaging__photo img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: center;\n\n  transform: scale(1.01);\n\n  transition:\n    transform .9s cubic-bezier(.16,1,.3,1);\n}\n\n\/* PEQUE\u00d1O N\u00daMERO *\/\n\n.frx-packaging__number {\n  position: absolute;\n  z-index: 2;\n\n  left: 12px;\n  bottom: 12px;\n\n  display: grid;\n  place-items: center;\n\n  width: 32px;\n  height: 32px;\n\n  border: 1px solid rgba(255,255,255,.28);\n  border-radius: 50%;\n\n  background: rgba(34,17,9,.75);\n\n  color: #FFFFFF;\n  font-size: 10px;\n  font-weight: 700;\n\n  -webkit-backdrop-filter: blur(6px);\n  backdrop-filter: blur(6px);\n}\n\n\/* HOVER *\/\n\n@media (hover: hover) {\n  .frx-packaging__item:hover .frx-packaging__photo {\n    transform: translateY(-4px);\n\n    box-shadow:\n      0 18px 35px rgba(34,17,9,.10);\n  }\n\n  .frx-packaging__item:hover .frx-packaging__photo img {\n    transform: scale(1.065);\n  }\n}\n\n\/* ===================================================\n   T\u00cdTULOS Y TEXTOS\n   =================================================== *\/\n\n.frx-packaging .frx-packaging__item h3 {\n  margin: 17px 0 7px !important;\n  padding: 0;\n\n  color: var(--pk-dark);\n\n  font-size: clamp(14px, 1.22vw, 17px);\n  font-weight: 700;\n  line-height: 1.45;\n  letter-spacing: -.015em;\n\n  text-align: left;\n  text-transform: none;\n  word-break: normal;\n  hyphens: none;\n}\n\n.frx-packaging .frx-packaging__item p {\n  margin: 0 !important;\n  padding: 0;\n\n  color: var(--pk-gray);\n\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.7;\n\n  text-align: left;\n}\n\n\/* ===================================================\n   ANIMACIONES: VISIBLES POR DEFECTO\n   =================================================== *\/\n\n.frx-packaging__heading,\n.frx-packaging__item {\n  opacity: 1;\n  transform: none;\n}\n\n\/* ===================================================\n   TABLET\n   =================================================== *\/\n\n@media (max-width: 1050px) {\n  .frx-packaging__inner {\n    width: calc(100% - 64px);\n  }\n\n  .frx-packaging__grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 28px 22px;\n  }\n\n  .frx-packaging__photo {\n    aspect-ratio: 16 \/ 9;\n  }\n}\n\n\/* ===================================================\n   M\u00d3VIL\n   =================================================== *\/\n\n@media (max-width: 767px) {\n  .frx-packaging {\n    padding: 54px 0 64px;\n  }\n\n  .frx-packaging__inner {\n    width: calc(100% - 38px);\n  }\n\n  .frx-packaging__heading {\n    margin-bottom: 26px;\n  }\n\n  .frx-packaging__eyebrow {\n    font-size: 9px;\n    margin-bottom: 15px;\n  }\n\n  .frx-packaging .frx-packaging__title {\n    font-size: clamp(29px, 7.1vw, 37px);\n  }\n\n  .frx-packaging .frx-packaging__intro {\n    font-size: 13.5px;\n    line-height: 1.75;\n  }\n\n  .frx-packaging__grid {\n    grid-template-columns: 1fr;\n    gap: 28px;\n  }\n\n  .frx-packaging__photo {\n    aspect-ratio: 16 \/ 9;\n  }\n\n  .frx-packaging .frx-packaging__item h3 {\n    margin-top: 13px !important;\n    font-size: 16px;\n  }\n\n  .frx-packaging .frx-packaging__item p {\n    font-size: 12.5px;\n  }\n}\n\n\/* ===================================================\n   MOVIMIENTO REDUCIDO\n   =================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n  .frx-packaging *,\n  .frx-packaging *::before,\n  .frx-packaging *::after {\n    animation: none !important;\n    transition: none !important;\n    transform: none !important;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFrupexPackaging() {\n    const section = document.querySelector(\".frx-packaging\");\n\n    if (\n      !section ||\n      section.dataset.frxPackagingReady === \"true\"\n    ) return;\n\n    section.dataset.frxPackagingReady = \"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 heading = section.querySelector(\n      \".frx-packaging__heading\"\n    );\n\n    const items = Array.from(\n      section.querySelectorAll(\".frx-packaging__item\")\n    );\n\n    let played = false;\n\n    function reveal(element, delay = 0, y = 18) {\n      if (!element) return;\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: 780,\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      reveal(heading, 0, 12);\n\n      items.forEach((item, index) => {\n        reveal(item, 130 + index * 110, 18);\n      });\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.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      initFrupexPackaging,\n      { once: true }\n    );\n  } else {\n    initFrupexPackaging();\n  }\n})();\n<\/script>\n\n<section class=\"frx-packaging\" id=\"presentacion-empaque\">\n  <div class=\"frx-packaging__inner\">\n\n    <!-- ENCABEZADO -->\n    <div class=\"frx-packaging__heading\">\n\n      <div class=\"frx-packaging__eyebrow\">\n        <span>DEL CAMPO AL DESTINO<\/span>\n      <\/div>\n\n      <h2 class=\"frx-packaging__title\">\n        Presentaci\u00f3n y empaque<span>.<\/span>\n      <\/h2>\n\n      <p class=\"frx-packaging__intro\">\n        Cada etapa de nuestro proceso est\u00e1 orientada\n        a conservar la calidad y preparar el banano\n        para su llegada a los mercados internacionales.\n      <\/p>\n\n    <\/div>\n\n    <!-- CUATRO ETAPAS -->\n    <div class=\"frx-packaging__grid\">\n\n      <!-- 01 -->\n      <article class=\"frx-packaging__item\">\n        <div class=\"frx-packaging__photo\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/mujer-cultivando-banano-scaled.jpg\" alt=\"Selecci\u00f3n de banano en campo\" loading=\"lazy\">\n          <span class=\"frx-packaging__number\">01<\/span>\n        <\/div>\n\n        <h3>Selecci\u00f3n en campo<\/h3>\n        <p>El origen de nuestra calidad.<\/p>\n      <\/article>\n\n      <!-- 02 -->\n      <article class=\"frx-packaging__item\">\n        <div class=\"frx-packaging__photo\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/CAJA-DE-BANANO-scaled.jpg\" alt=\"Empaque de banano SWEET LAND\" loading=\"lazy\">\n          <span class=\"frx-packaging__number\">02<\/span>\n        <\/div>\n\n        <h3>Empaque<\/h3>\n        <p>Presentaciones adaptadas a cada mercado.<\/p>\n      <\/article>\n\n      <!-- 03 -->\n      <article class=\"frx-packaging__item\">\n        <div class=\"frx-packaging__photo\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/caja-pale-scaled.jpg\" alt=\"Paletizaci\u00f3n de cajas de banano para exportaci\u00f3n\" loading=\"lazy\">\n          <span class=\"frx-packaging__number\">03<\/span>\n        <\/div>\n\n        <h3>Paletizaci\u00f3n<\/h3>\n        <p>Organizaci\u00f3n y cuidado en cada carga.<\/p>\n      <\/article>\n\n      <!-- 04 -->\n      <article class=\"frx-packaging__item\">\n        <div class=\"frx-packaging__photo\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/senor-alzando-caja-de-banano-scaled.jpg\" alt=\"Contenedor con cajas de banano listo para exportaci\u00f3n\" loading=\"lazy\">\n          <span class=\"frx-packaging__number\">04<\/span>\n        <\/div>\n\n        <h3>Listo para exportaci\u00f3n<\/h3>\n        <p>Preparado para conectar con el mundo.<\/p>\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>FRUPEX \u00b7 BANANO DE EXPORTACI\u00d3N Un banano para cada mercado. Calidad, frescura y consistencia en cada caja, desde el campo [&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":"","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-157","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/pages\/157","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=157"}],"version-history":[{"count":12,"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/pages\/157\/revisions"}],"predecessor-version":[{"id":304,"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/pages\/157\/revisions\/304"}],"wp:attachment":[{"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/media?parent=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}