{"id":223,"date":"2026-10-22T01:59:02","date_gmt":"2026-10-22T01:59:02","guid":{"rendered":"https:\/\/zyroperu.com\/?page_id=223"},"modified":"2026-10-22T01:59:02","modified_gmt":"2026-10-22T01:59:02","slug":"zyro-training","status":"publish","type":"page","link":"https:\/\/zyroperu.com\/?page_id=223","title":{"rendered":"ZYRO Training"},"content":{"rendered":"\n<style>\n\/* ZYRO TRAINING - COLLECTION 001 *\/\n#zyro-training,\n#zyro-training * {\n  box-sizing: border-box;\n}\n\n#zyro-training {\n  width: 100%;\n  max-width: 100%;\n  padding: 70px 20px;\n  background: #090909;\n  color: #fff;\n  font-family: Arial, Helvetica, sans-serif;\n  overflow: hidden;\n}\n\n#zyro-training .zt-container {\n  max-width: 1180px;\n  margin: 0 auto;\n}\n\n#zyro-training .zt-header {\n  text-align: center;\n  margin-bottom: 45px;\n}\n\n#zyro-training .zt-eyebrow {\n  color: #aaa;\n  font-size: 12px;\n  letter-spacing: 3px;\n}\n\n#zyro-training h2 {\n  color: white !important;\n  font-family: Arial, Helvetica, sans-serif !important;\n  font-weight: 900 !important;\n  font-size: clamp(32px, 5vw, 58px) !important;\n  line-height: 1.1 !important;\n  margin: 20px 0 !important;\n}\n\n#zyro-training .zt-layout {\n  display: grid;\n  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);\n  gap: 45px;\n  align-items: start;\n}\n\n#zyro-training .zt-photo {\n  background: #191919;\n  overflow: hidden;\n  aspect-ratio: 3 \/ 4;\n}\n\n#zyro-training .zt-photo img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n#zyro-training .zt-view-switch {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n  margin-top: 12px;\n}\n\n#zyro-training button {\n  font-family: Arial, Helvetica, sans-serif;\n  cursor: pointer;\n  transition: .2s ease;\n}\n\n#zyro-training .zt-view {\n  padding: 13px;\n  border: 1px solid #444;\n  background: #141414;\n  color: #aaa;\n  font-size: 12px;\n  letter-spacing: 2px;\n}\n\n#zyro-training .zt-view.is-active {\n  border-color: #fff;\n  color: #fff;\n}\n\n#zyro-training .zt-info h3 {\n  color: #fff !important;\n  font-family: Arial, Helvetica, sans-serif !important;\n  font-size: clamp(25px, 3vw, 35px) !important;\n  line-height: 1.2;\n  margin: 12px 0 20px !important;\n  font-weight: 800;\n}\n\n#zyro-training .zt-description {\n  color: #bbb;\n  font-size: 16px;\n  line-height: 1.8;\n  margin-bottom: 35px;\n}\n\n#zyro-training .zt-field {\n  margin-bottom: 32px;\n}\n\n#zyro-training .zt-label {\n  display: block;\n  font-size: 13px;\n  font-weight: 700;\n  margin-bottom: 15px;\n  letter-spacing: 1px;\n  color: #fff;\n}\n\n#zyro-training .zt-colors {\n  display: flex;\n  gap: 14px;\n  align-items: center;\n}\n\n#zyro-training .zt-color {\n  width: 42px;\n  height: 42px;\n  border: 2px solid transparent;\n  border-radius: 50%;\n  background: transparent;\n  display: grid;\n  place-items: center;\n  padding: 4px;\n}\n\n#zyro-training .zt-color span {\n  display: block;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  border: 1px solid #777;\n}\n\n#zyro-training .zt-color.is-active {\n  border-color: #fff;\n}\n\n#zyro-training .zt-sizes {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n#zyro-training .zt-size {\n  min-width: 57px;\n  height: 49px;\n  padding: 0 12px;\n  background: #141414;\n  color: #fff;\n  border: 1px solid #444;\n  font-size: 14px;\n}\n\n#zyro-training .zt-size.is-active {\n  background: #fff;\n  color: #000;\n  border-color: #fff;\n}\n\n#zyro-training .zt-selection {\n  padding: 20px;\n  background: #151515;\n  border: 1px solid #333;\n  font-size: 14px;\n  line-height: 1.8;\n  color: #ddd;\n}\n\n#zyro-training .zt-status {\n  display: block;\n  margin-top: 28px;\n  padding: 19px;\n  border: 1px solid #555;\n  text-align: center;\n  letter-spacing: 3px;\n  font-size: 13px;\n  color: #fff;\n}\n\n#zyro-training .zt-footnote {\n  font-size: 12px;\n  color: #999;\n  margin-top: 20px;\n  line-height: 1.6;\n}\n\n#zyro-training button:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 3px;\n}\n\n\/* TABLET *\/\n@media (max-width: 900px) {\n  #zyro-training .zt-layout {\n    gap: 25px;\n  }\n}\n\n\/* M\u00d3VIL *\/\n@media (max-width: 767px) {\n  #zyro-training {\n    padding: 50px 16px;\n  }\n\n  #zyro-training .zt-layout {\n    grid-template-columns: 1fr;\n    gap: 30px;\n  }\n\n  #zyro-training .zt-header {\n    margin-bottom: 30px;\n  }\n\n  #zyro-training .zt-photo {\n    width: 100%;\n  }\n\n  #zyro-training .zt-size {\n    flex: 1;\n    min-width: 48px;\n  }\n}\n<\/style>\n\n<section id=\"zyro-training\">\n  <div class=\"zt-container\">\n\n    <div class=\"zt-header\">\n      <p class=\"zt-eyebrow\">\n        ZYRO \u00b7 COLLECTION 001 \u00b7 ORIGEN\n      <\/p>\n      <h2>TRAINING COLLECTION<\/h2>\n    <\/div>\n\n    <div class=\"zt-layout\">\n\n      <!-- GALER\u00cdA DEL PRODUCTO -->\n      <div>\n        <div class=\"zt-photo\">\n          <img decoding=\"async\"\n            id=\"zt-main-image\"\n            src=\"https:\/\/zyroperu.com\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-21-at-7.58.52-PM-1.jpeg\"\n            alt=\"Polo ZYRO Training negro, vista delantera\"\n            loading=\"lazy\"\n          >\n        <\/div>\n\n        <div class=\"zt-view-switch\">\n          <button type=\"button\"\n            class=\"zt-view is-active\"\n            data-view=\"front\"\n            aria-pressed=\"true\">\n            VISTA FRONTAL\n          <\/button>\n\n          <button type=\"button\"\n            class=\"zt-view\"\n            data-view=\"back\"\n            aria-pressed=\"false\">\n            VISTA TRASERA\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- DETALLES -->\n      <div class=\"zt-info\">\n\n        <p class=\"zt-eyebrow\">\n          PERFORMANCE \/ 001\n        <\/p>\n\n        <h3>ZYRO PERFORMANCE TEE<\/h3>\n\n        <p class=\"zt-description\">\n          Dise\u00f1ado para acompa\u00f1ar cada movimiento.\n          Una propuesta deportiva de estilo premium,\n          con identidad minimalista y detalles\n          exclusivos ZYRO.\n        <\/p>\n\n        <!-- COLORES -->\n        <div class=\"zt-field\">\n          <span class=\"zt-label\">\n            COLOR: <span id=\"zt-color-name\">NEGRO<\/span>\n          <\/span>\n\n          <div class=\"zt-colors\"\n               role=\"group\"\n               aria-label=\"Seleccionar color\">\n\n            <button type=\"button\"\n              class=\"zt-color is-active\"\n              data-color=\"negro\"\n              aria-label=\"Negro\"\n              aria-pressed=\"true\">\n              <span style=\"background:#111111\"><\/span>\n            <\/button>\n\n            <button type=\"button\"\n              class=\"zt-color\"\n              data-color=\"plomo\"\n              aria-label=\"Plomo\"\n              aria-pressed=\"false\">\n              <span style=\"background:#777777\"><\/span>\n            <\/button>\n\n            <button type=\"button\"\n              class=\"zt-color\"\n              data-color=\"blanco\"\n              aria-label=\"Blanco\"\n              aria-pressed=\"false\">\n              <span style=\"background:#ffffff\"><\/span>\n            <\/button>\n\n          <\/div>\n        <\/div>\n\n        <!-- TALLAS -->\n        <div class=\"zt-field\">\n          <span class=\"zt-label\">\n            TALLA: <span id=\"zt-size-name\">M<\/span>\n          <\/span>\n\n          <div class=\"zt-sizes\"\n               role=\"group\"\n               aria-label=\"Seleccionar talla\">\n\n            <button type=\"button\"\n              class=\"zt-size\"\n              data-size=\"S\"\n              aria-pressed=\"false\">S<\/button>\n\n            <button type=\"button\"\n              class=\"zt-size is-active\"\n              data-size=\"M\"\n              aria-pressed=\"true\">M<\/button>\n\n            <button type=\"button\"\n              class=\"zt-size\"\n              data-size=\"L\"\n              aria-pressed=\"false\">L<\/button>\n\n            <button type=\"button\"\n              class=\"zt-size\"\n              data-size=\"XL\"\n              aria-pressed=\"false\">XL<\/button>\n\n          <\/div>\n        <\/div>\n\n        <!-- RESUMEN -->\n        <div class=\"zt-selection\" aria-live=\"polite\">\n          <strong>TU SELECCI\u00d3N<\/strong>\n          <div id=\"zt-summary\">\n            ZYRO Performance Tee \u00b7 Negro \u00b7 Talla M\n          <\/div>\n        <\/div>\n\n        <div class=\"zt-status\">\n          PR\u00d3XIMAMENTE\n        <\/div>\n\n        <p class=\"zt-footnote\">\n          Collection 001 \u2014 ORIGEN.\n          Producto en fase de prelanzamiento.\n          Disponibilidad y tallas por confirmar.\n        <\/p>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  function initZyroTraining() {\n\n    const root = document.getElementById(\"zyro-training\");\n    if (!root || root.dataset.initialized === \"true\") return;\n    root.dataset.initialized = \"true\";\n\n    const base =\n      \"https:\/\/zyroperu.com\/wp-content\/uploads\/2026\/10\/\";\n\n    const prefix =\n      \"WhatsApp-Image-2026-10-21-at-7.58.52-PM\";\n\n    const images = {\n      negro: {\n        front: base + prefix + \"-1.jpeg\",\n        back: base + prefix + \"-3.jpeg\"\n      },\n      blanco: {\n        front: base + prefix + \"-2.jpeg\",\n        back: base + prefix + \".jpeg\"\n      },\n      plomo: {\n        front: base + prefix + \"-5.jpeg\",\n        back: base + prefix + \"-4.jpeg\"\n      }\n    };\n\n    const labels = {\n      negro: \"Negro\",\n      blanco: \"Blanco\",\n      plomo: \"Plomo\"\n    };\n\n    let selectedColor = \"negro\";\n    let selectedView = \"front\";\n    let selectedSize = \"M\";\n\n    const mainImage =\n      root.querySelector(\"#zt-main-image\");\n\n    const colorName =\n      root.querySelector(\"#zt-color-name\");\n\n    const sizeName =\n      root.querySelector(\"#zt-size-name\");\n\n    const summary =\n      root.querySelector(\"#zt-summary\");\n\n    function render() {\n      mainImage.src =\n        images[selectedColor][selectedView];\n\n      mainImage.alt =\n        \"Polo ZYRO Training \" +\n        labels[selectedColor] +\n        \", vista \" +\n        (selectedView === \"front\"\n          ? \"delantera\" : \"trasera\");\n\n      colorName.textContent =\n        labels[selectedColor].toUpperCase();\n\n      sizeName.textContent = selectedSize;\n\n      summary.textContent =\n        \"ZYRO Performance Tee \u00b7 \" +\n        labels[selectedColor] +\n        \" \u00b7 Talla \" + selectedSize;\n\n      root.querySelectorAll(\".zt-color\")\n        .forEach(function (button) {\n          const active =\n            button.dataset.color === selectedColor;\n\n          button.classList.toggle(\n            \"is-active\", active\n          );\n          button.setAttribute(\n            \"aria-pressed\", String(active)\n          );\n        });\n\n      root.querySelectorAll(\".zt-view\")\n        .forEach(function (button) {\n          const active =\n            button.dataset.view === selectedView;\n\n          button.classList.toggle(\n            \"is-active\", active\n          );\n          button.setAttribute(\n            \"aria-pressed\", String(active)\n          );\n        });\n\n      root.querySelectorAll(\".zt-size\")\n        .forEach(function (button) {\n          const active =\n            button.dataset.size === selectedSize;\n\n          button.classList.toggle(\n            \"is-active\", active\n          );\n          button.setAttribute(\n            \"aria-pressed\", String(active)\n          );\n        });\n    }\n\n    root.querySelectorAll(\".zt-color\")\n      .forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          selectedColor = button.dataset.color;\n          render();\n        });\n      });\n\n    root.querySelectorAll(\".zt-view\")\n      .forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          selectedView = button.dataset.view;\n          render();\n        });\n      });\n\n    root.querySelectorAll(\".zt-size\")\n      .forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          selectedSize = button.dataset.size;\n          render();\n        });\n      });\n\n    render();\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\", initZyroTraining\n    );\n  } else {\n    initZyroTraining();\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>ZYRO \u00b7 COLLECTION 001 \u00b7 ORIGEN TRAINING COLLECTION VISTA FRONTAL VISTA TRASERA PERFORMANCE \/ 001 ZYRO PERFORMANCE TEE Dise\u00f1ado para acompa\u00f1ar cada movimiento. Una propuesta deportiva de estilo premium, con identidad minimalista y detalles exclusivos ZYRO. COLOR: NEGRO TALLA: M S M L XL TU SELECCI\u00d3N ZYRO Performance Tee \u00b7 Negro \u00b7 Talla M PR\u00d3XIMAMENTE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"zyro-landing-oficial","meta":{"footnotes":""},"class_list":["post-223","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zyroperu.com\/index.php?rest_route=\/wp\/v2\/pages\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zyroperu.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zyroperu.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zyroperu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zyroperu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=223"}],"version-history":[{"count":1,"href":"https:\/\/zyroperu.com\/index.php?rest_route=\/wp\/v2\/pages\/223\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/zyroperu.com\/index.php?rest_route=\/wp\/v2\/pages\/223\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/zyroperu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}