{"id":721,"date":"2025-12-18T17:57:16","date_gmt":"2025-12-18T17:57:16","guid":{"rendered":"https:\/\/demosites.royal-elementor-addons.com\/ai-saas-v1\/?page_id=721"},"modified":"2026-07-08T22:11:46","modified_gmt":"2026-07-08T22:11:46","slug":"home-ai-saas-v1","status":"publish","type":"page","link":"https:\/\/hater.pe\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"721\" class=\"elementor elementor-721\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0bc1e8 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"d0bc1e8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c6267d elementor-widget elementor-widget-shortcode\" data-id=\"8c6267d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"hfs-root\"><div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/YTDown_YouTube_NIKON-Natural-Intelligence_Media_W4zl5UhkTds_001_1080p.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/05\/2b55f991-9f9d-45fb-9781-9fc1cbbf7c75_carw_16x9x1920-1.jpg\"\r\n             data-title=\"Natural intelligence &#8211; Nikon\"\r\n             data-cat=\"\"\r\n             data-year=\"\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/natural-intelligence-nikon\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/el-regreso-hd.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Frame-120.png\"\r\n             data-title=\"El regreso &#8211; Cerveza Arequipe\u00f1a\"\r\n             data-cat=\"Film\"\r\n             data-year=\"2021\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/2311\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/hijos-del-volcan.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/05\/59902cad-5238-42bc-af04-d4f0031863e2_rwc_0x0x1917x1081x1920.png\"\r\n             data-title=\"Hijos del Volc\u00e1n &#8211; Cerveza Arequipe\u00f1a\"\r\n             data-cat=\"Film\"\r\n             data-year=\"2021\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/hijos-del-volcan-cerveza-arequipena\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/otorongos.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/05\/7bda140d-fe58-4ea8-a18d-6f25ada1fe5b_rwc_0x0x1917x1081x1920.png\"\r\n             data-title=\"Cacer\u00eda Legal de Otorongos &#8211; Cerveza San Juan\"\r\n             data-cat=\"\"\r\n             data-year=\"2021\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/caceria-legal-de-otorongos-cerveza-san-juan\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/mes-de-la-pintura.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/05\/f4af2096-e178-43f5-8188-0c09f9f694ce_rwc_24x0x1348x760x1348.png\"\r\n             data-title=\"Mes de la Pintura &#8211; Qroma\"\r\n             data-cat=\"Film\"\r\n             data-year=\"2015\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/mes-de-la-pintura-qroma\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/familias-vencedor-1.mp4\"\r\n             data-poster=\"\"\r\n             data-title=\"Historias de Familias &#8211; Pinturas Vencedor\"\r\n             data-cat=\"Film\"\r\n             data-year=\"2016\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/historias-de-familias-pinturas-vencedor\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/familias-de-sangre.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/05\/5c08a50a-9e77-4d74-a7c3-27634dd0eaa7_rwc_0x0x1919x1082x1920.png\"\r\n             data-title=\"Familias de Sangre &#8211; Rimac Seguros\"\r\n             data-cat=\"Film\"\r\n             data-year=\"2018\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/familias-de-sangre-rimac-seguros\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/apurados-rimac-1.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/05\/c2ee6fb3-f4ab-4fd9-b972-6da6472e4538_rwc_0x0x1920x1082x1920.png\"\r\n             data-title=\"Apurados &#8211; Rimac Seguros\"\r\n             data-cat=\"\"\r\n             data-year=\"\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/apurados-rimac-seguros\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/reto-regional-bbva.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/05\/9c2772ae-1b59-4175-b6a8-25dd81412e6e_rwc_0x0x1919x1082x1920.png\"\r\n             data-title=\"Descubriendo Talentos &#8211; BBVA Reto Regional\"\r\n             data-cat=\"Film\"\r\n             data-year=\"2019\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/descubriendo-talentos-bbva-reto-regional\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/sodexo.mp4\"\r\n             data-poster=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/05\/a7aac193-6613-4dba-8413-d0a4a1b1ea74_carw_16x9x1920.png\"\r\n             data-title=\"Proyecto Marte &#8211; Sodexo\"\r\n             data-cat=\"Film\"\r\n             data-year=\"2019\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/proyecto-marte-sodexo\/\">\r\n        <\/div>\n<div class=\"hfs-panel\"\r\n             data-video=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/06\/YTDown_YouTube_Plant-Lamp-UTEC_Media_Nlewu9jZG38_001_1080p.mp4\"\r\n             data-poster=\"\"\r\n             data-title=\"Plant lamp &#8211; UTEC\"\r\n             data-cat=\"innovaci\u00f3n\"\r\n             data-year=\"2015\"\r\n             data-desc=\"\"\r\n             data-link=\"https:\/\/hater.pe\/index.php\/proyecto\/2306\/\">\r\n        <\/div>\n<\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ef1054 elementor-widget elementor-widget-html\" data-id=\"6ef1054\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n<link\r\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=Titillium+Web:wght@300;400;700&display=swap\"\r\n  rel=\"stylesheet\"\r\n\/>\r\n\r\n<!--\r\n    Edita los atributos data-* de cada .hfs-panel:\r\n      data-video  \u2192 URL del mp4\r\n      data-poster \u2192 imagen previa mientras carga el video\r\n      data-title  \u2192 T\u00edtulo\r\n      data-cat    \u2192 Categor\u00eda\r\n      data-year   \u2192 A\u00f1o\r\n      data-desc   \u2192 Descripci\u00f3n breve (aparece en el modal)\r\n      data-link   \u2192 URL del proyecto (bot\u00f3n secundario en modal)\r\n-->\r\n\r\n\r\n<!-- MODAL -->\r\n<div id=\"hfs-modal\" aria-modal=\"true\" role=\"dialog\">\r\n  <button id=\"hfs-modal-close\" aria-label=\"Cerrar\">&#x2715;<\/button>\r\n  <div id=\"hfs-modal-inner\">\r\n    <div id=\"hfs-modal-video-wrap\">\r\n      <video id=\"hfs-modal-video\" controls playsinline><\/video>\r\n    <\/div>\r\n    <div id=\"hfs-modal-info\">\r\n      <p id=\"hfs-modal-meta\"><\/p>\r\n      <h2 id=\"hfs-modal-title\"><\/h2>\r\n      <p id=\"hfs-modal-desc\"><\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  #hfs-root {\r\n    background: #000;\r\n    width: 100%;\r\n  }\r\n\r\n  .hfs-panel {\r\n    position: sticky;\r\n    top: 0;\r\n    height: 100vh;\r\n    height: 100vh;\r\n    width: 100%;\r\n    \/* Transparente: la card anterior se ve de fondo *\/\r\n    background: transparent;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n   \/*El inner empieza peque\u00f1o y crece \u2014 JS lo anima *\/\r\n  .hfs-inner {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    transform-origin: center center;\r\n    will-change: transform, border-radius;\r\n  }\r\n  \r\n\r\n  \/*.hfs-poster {*\/\r\n  \/*  position: absolute;*\/\r\n  \/*  inset: 0;*\/\r\n  \/*  width: 100%;*\/\r\n  \/*  height: 100%;*\/\r\n  \/*  object-fit: cover;*\/\r\n  \/*  z-index: 1;*\/\r\n  \/*}*\/\r\n  \r\n .hfs-poster {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100vh!important;\r\n    object-fit: cover;\r\n    object-position: center center;\r\n    z-index: 1;\r\n    display: block;\r\n}\r\n\r\n  .hfs-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(135deg, #0d0d0d, #1c1c1c 50%, #111);\r\n    z-index: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .hfs-bg span {\r\n    font-family: \"Titillium Web\", sans-serif;\r\n    color: rgba(255, 255, 255, 0.1);\r\n    font-size: 12px;\r\n    letter-spacing: 5px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .hfs-video {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    z-index: 2;\r\n    opacity: 0;\r\n    transition: opacity 0.6s ease;\r\n  }\r\n  .hfs-video.ready {\r\n    opacity: 1;\r\n  }\r\n\r\n  .hfs-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 3;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: linear-gradient(\r\n      to top,\r\n      rgba(0, 0, 0, 0.6) 0%,\r\n      rgba(0, 0, 0, 0.15) 50%,\r\n      rgba(0, 0, 0, 0.6) 100%\r\n    );\r\n  }\r\n\r\n  .hfs-data {\r\n      width: 90%;\r\n    display: flex;\r\n    \/*flex-direction: column;*\/\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    text-align: center;\r\n    gap: 20px;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition:\r\n      opacity 0.55s ease,\r\n      transform 0.55s ease;\r\n  }\r\n  .hfs-inner.active .hfs-data {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  \r\n \r\n  .hfs-title {\r\n    font-family: \"Titillium Web\", sans-serif;\r\n    color: #fff;\r\n    font-size: clamp(18px, 2.4vw, 17px);\r\n    \/*font-weight: 700;*\/\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);\r\n    transition: color 0.3s;\r\n  }\r\n   .hfs-title:hover {\r\n    color: #d5ee4a;\r\n  }\r\n\r\n  .hfs-meta {\r\n    font-family: \"Titillium Web\", sans-serif;\r\n    color: rgba(255, 255, 255, 0.85);\r\n    font-size: clamp(12px, 1.1vw, 17px);\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .hfs-year {\r\n    font-family: \"Titillium Web\", sans-serif;\r\n    color: rgba(255, 255, 255, 0.85);\r\n    font-size: clamp(12px, 1.1vw, 17px);\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .hfs-btn {\r\n    position: relative;\r\n    font-family: \"Titillium Web\", sans-serif;\r\n    color: #fff;\r\n    text-decoration: none;\r\n    font-size: clamp(11px, 0.9vw, 14px);\r\n    font-weight: 600;\r\n    letter-spacing: 2px;\r\n    padding: 14px 28px;\r\n    border: 1px solid rgba(255, 255, 255, 0.4);\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    flex-shrink: 0;\r\n    transition: border-color 0.4s;\r\n  }\r\n  .hfs-btn span {\r\n    position: relative;\r\n    z-index: 2;\r\n    transition: color 0.3s;\r\n  }\r\n  .hfs-btn::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: #d5ee4a;\r\n    transition: top 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n    z-index: 1;\r\n  }\r\n  .hfs-btn:hover {\r\n    border-color: #d5ee4a;\r\n  }\r\n  .hfs-btn:hover span {\r\n    color: #000;\r\n  }\r\n  .hfs-btn:hover::before {\r\n    top: 0;\r\n  }\r\n\r\n  \/* === MODAL === *\/\r\n#hfs-modal {\r\n    display: flex;                        \/* siempre flex *\/\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 99999;\r\n    background: rgba(0, 0, 0, 0.92);\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 24px;\r\n    opacity: 0;                           \/* empieza invisible *\/\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n    transition: opacity 0.4s ease, visibility 0.4s ease;\r\n}\r\n\r\n #hfs-modal.open {\r\n    opacity: 1;                           \/* fade in *\/\r\n    visibility: visible;\r\n    pointer-events: all;\r\n}\r\n  #hfs-modal-close {\r\n    position: fixed;\r\n    top: 20px;\r\n    right: 24px;\r\n    background: transparent;\r\n    border: none;\r\n    color: #fff;\r\n    font-size: 22px;\r\n    cursor: pointer;\r\n    z-index: 10;\r\n    opacity: 0.7;\r\n    transition:\r\n      opacity 0.2s,\r\n      color 0.2s;\r\n    font-family: \"Titillium Web\", sans-serif;\r\n  }\r\n  #hfs-modal-close:hover {\r\n    opacity: 1;\r\n    color: #d5ee4a;\r\n  }\r\n\r\n #hfs-modal-inner {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 40px;\r\n    width: 100%;\r\n    max-width: 1100px;\r\n    transform: translateY(16px);          \/* sube suavemente *\/\r\n    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n  #hfs-modal-video-wrap {\r\n    flex: 0 0 65%;\r\n    background: #000;\r\n    position: relative;\r\n  }\r\n  #hfs-modal-video {\r\n    width: 100%;\r\n    display: block;\r\n    max-height: 70vh;\r\n    object-fit: contain;\r\n    background: #000;\r\n  }\r\n  #hfs-modal-info {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n  }\r\n  #hfs-modal-meta {\r\n    font-family: \"Titillium Web\", sans-serif;\r\n    color: #d5ee4a;\r\n    font-size: 12px;\r\n    letter-spacing: 4px;\r\n    text-transform: uppercase;\r\n    margin: 0;\r\n  }\r\n  #hfs-modal-title {\r\n    font-family: \"Titillium Web\", sans-serif;\r\n    color: #fff;\r\n    font-size: clamp(18px, 2vw, 28px);\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    margin: 0;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.15);\r\n    padding-bottom: 14px;\r\n  }\r\n  #hfs-modal-desc {\r\n    font-family: \"Titillium Web\", sans-serif;\r\n    color: rgba(255, 255, 255, 0.75);\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n    margin: 0;\r\n  }\r\n  \r\n  \r\n  #hfs-modal.open #hfs-modal-inner {\r\n    transform: translateY(0);\r\n}\r\n\r\n  @media (max-width: 768px) {\r\n    #hfs-modal-inner {\r\n      flex-direction: column;\r\n    }\r\n    #hfs-modal-video-wrap {\r\n      flex: none;\r\n      width: 100%;\r\n    }\r\n    #hfs-modal-info {\r\n      gap: 10px;\r\n    }\r\n    .hfs-data {\r\n      gap: 12px;\r\n      flex-direction: column;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function () {\r\n    var root = document.getElementById(\"hfs-root\");\r\n    var panels = [];\r\n    var inners = [];\r\n    var mobile = window.innerWidth <= 768;\r\n    \/* Scale y border-radius iniciales (card entrando desde abajo) *\/\r\n    var S0 = mobile ? 0.88 : 0.76;\r\n    var R0 = mobile ? 12 : 20;\r\n    var rootOffsetTop = 0;\r\n\r\n    function clamp(v, a, b) {\r\n      return Math.max(a, Math.min(b, v));\r\n    }\r\n    function lerp(a, b, t) {\r\n      return a + (b - a) * t;\r\n    }\r\n\r\n    function getOffsetTop(el) {\r\n      var top = 0;\r\n      while (el) {\r\n        top += el.offsetTop;\r\n        el = el.offsetParent;\r\n      }\r\n      return top;\r\n    }\r\n\r\n    \/* Recorre todos los padres y fuerza overflow:visible *\/\r\n    function fixParentOverflow() {\r\n      var el = root.parentElement;\r\n      while (el && el.tagName !== \"BODY\") {\r\n        el.style.setProperty(\"overflow\", \"visible\", \"important\");\r\n        el.style.setProperty(\"overflow-x\", \"visible\", \"important\");\r\n        el.style.setProperty(\"overflow-y\", \"visible\", \"important\");\r\n        el = el.parentElement;\r\n      }\r\n    }\r\n\r\n    \/* --- Modal logic --- *\/\r\n    var modal = document.getElementById(\"hfs-modal\");\r\n    var modalVideo = document.getElementById(\"hfs-modal-video\");\r\n    var modalTitle = document.getElementById(\"hfs-modal-title\");\r\n    var modalDesc = document.getElementById(\"hfs-modal-desc\");\r\n    var modalMeta = document.getElementById(\"hfs-modal-meta\");\r\n    var modalClose = document.getElementById(\"hfs-modal-close\");\r\n\r\n    function openModal(src, title, desc, cat, year) {\r\n      modalVideo.src = src || \"\";\r\n      modalTitle.textContent = title || \"\";\r\n      modalDesc.textContent = desc || \"\";\r\n      modalMeta.textContent = cat + (year ? \"  \u00b7  \" + year : \"\");\r\n      modal.classList.add(\"open\");\r\n      document.body.style.overflow = \"hidden\";\r\n      if (src) modalVideo.play();\r\n    }\r\n   function closeModal() {\r\n    modal.classList.remove(\"open\");\r\n    document.body.style.overflow = \"\";\r\n    modalVideo.pause();\r\n    setTimeout(function () {\r\n        modalVideo.src = \"\";             \/\/ espera el fade out antes de limpiar\r\n    }, 400);\r\n}\r\n    modalClose.addEventListener(\"click\", closeModal);\r\n    modal.addEventListener(\"click\", function (e) {\r\n      if (e.target === modal) closeModal();\r\n    });\r\n    document.addEventListener(\"keydown\", function (e) {\r\n      if (e.key === \"Escape\") closeModal();\r\n    });\r\n\r\n    function buildPanels() {\r\n      root.querySelectorAll(\".hfs-panel\").forEach(function (panel, idx) {\r\n        var src = (panel.dataset.video || \"\").trim();\r\n        var poster = (panel.dataset.poster || \"\").trim();\r\n        var title = panel.dataset.title || \"PROYECTO \" + (idx + 1);\r\n        var cat = panel.dataset.cat || \"Categor\u00eda\";\r\n        var year = panel.dataset.year || \"\";\r\n        var desc = panel.dataset.desc || \"\";\r\n\r\n        panel.style.zIndex = idx + 1;\r\n\r\n        var posterHtml = poster\r\n          ? '<img decoding=\"async\" class=\"hfs-poster\" src=\"' + poster + '\" alt=\"' + title + '\">'\r\n          : \"\";\r\n        var videoHtml = src\r\n          ? '<video class=\"hfs-video\" autoplay muted loop playsinline poster=\"' +\r\n            poster +\r\n            '\"><source src=\"' +\r\n            src +\r\n            '\" type=\"video\/mp4\"><\/video>'\r\n          : \"\";\r\n\r\n        panel.innerHTML =\r\n          '<div class=\"hfs-inner\">' +\r\n          '<div class=\"hfs-bg\"><span>Video ' +\r\n          (idx + 1) +\r\n          \"<\/span><\/div>\" +\r\n          posterHtml +\r\n          videoHtml +\r\n          '<div class=\"hfs-overlay\">' +\r\n          '<div class=\"hfs-data\">' +\r\n          '<span class=\"hfs-title\">' +\r\n          title +\r\n          \"<\/span>\" +\r\n          '<span class=\"hfs-meta\">' +\r\n          cat + '<\/span>'+\r\n          '<span class=\"hfs-year\">' +\r\n          year +\r\n          \"<\/span>\" +\r\n          '<button class=\"hfs-btn\" type=\"button\"><span>VER PROYECTO<\/span><\/button>' +\r\n          \"<\/div>\" +\r\n          \"<\/div>\" +\r\n          \"<\/div>\";\r\n\r\n        \/* Abrir modal al hacer click en el bot\u00f3n *\/\r\n        panel.querySelector(\".hfs-btn\").addEventListener(\"click\", function () {\r\n          openModal(src, title, desc, cat, year);\r\n        });\r\n\r\n        var vid = panel.querySelector(\".hfs-video\");\r\n        if (vid)\r\n          vid.addEventListener(\"canplay\", function () {\r\n            vid.classList.add(\"ready\");\r\n          });\r\n\r\n        panels.push(panel);\r\n        inners.push(panel.querySelector(\".hfs-inner\"));\r\n      });\r\n    }\r\n\r\n    function calcRootTop() {\r\n      rootOffsetTop = getOffsetTop(root);\r\n    }\r\n\r\n    function onScroll() {\r\n      var scrollY = window.scrollY;\r\n      var vh = window.innerHeight;\r\n\r\n      inners.forEach(function (inner, i) {\r\n        var naturalTop = rootOffsetTop + i * vh;\r\n\r\n        \/*\r\n         * Progreso de ENTRADA de esta card:\r\n         *   0 = la card acaba de aparecer por el borde inferior\r\n         *   1 = la card lleg\u00f3 al tope y qued\u00f3 sticky\r\n         *\/\r\n        var ep = clamp((scrollY - naturalTop + vh) \/ vh, 0, 1);\r\n\r\n        \/* Scale: crece de S0 \u2192 1 durante la entrada *\/\r\n        var scale = lerp(S0, 1, ep);\r\n\r\n        \/* Border-radius: de R0 \u2192 0 durante la entrada *\/\r\n        var radius = lerp(R0, 0, ep);\r\n\r\n        \/*\r\n         * NO hay animaci\u00f3n de salida.\r\n         * Cuando ep=1 la card qued\u00f3 a scale:1 (pantalla completa)\r\n         * y se queda as\u00ed de fondo mientras las siguientes la tapan.\r\n         *\/\r\n\r\n        inner.style.transform = \"scale(\" + scale.toFixed(4) + \")\";\r\n        inner.style.borderRadius = radius.toFixed(1) + \"px\";\r\n\r\n        \/* Mostrar texto cuando la card est\u00e1 completamente expandida *\/\r\n        if (ep >= 0.95) {\r\n          inner.classList.add(\"active\");\r\n        } else {\r\n          inner.classList.remove(\"active\");\r\n        }\r\n      });\r\n    }\r\n\r\n    function init() {\r\n      fixParentOverflow();\r\n      buildPanels();\r\n      setTimeout(function () {\r\n        calcRootTop();\r\n        onScroll();\r\n      }, 200);\r\n      window.addEventListener(\"scroll\", onScroll, { passive: true });\r\n      window.addEventListener(\"resize\", function () {\r\n        mobile = window.innerWidth <= 768;\r\n        S0 = mobile ? 0.88 : 0.76;\r\n        R0 = mobile ? 12 : 20;\r\n        calcRootTop();\r\n        onScroll();\r\n      });\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n      document.addEventListener(\"DOMContentLoaded\", init);\r\n    } else {\r\n      init();\r\n    }\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ffef1cd e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"ffef1cd\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63708e6 elementor-widget elementor-widget-html\" data-id=\"63708e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Titillium+Web:wght@200;300;400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"hater-about-section\" id=\"haterSection\">\r\n    <div class=\"hater-about-content\">\r\n        <h4 class=\"hater-about-tag\">About us<\/h4>\r\n        \r\n        <h2 class=\"hater-about-title js-bounce-text\">\r\n            <span class=\"yellow-text\">Director creativo\/<\/span><br>\r\n            <span class=\"white-text\">Copywriter<\/span>\r\n        <\/h2>\r\n\r\n        <div class=\"hater-about-description js-bounce-text\">\r\n            <p>\u201cSoy hater y odio la publicidad\u201d La que estorba. La que finge. La que habla sin tener nada que decir. Pero soy un lover de las ideas que incomodan. Que despiertan. Que dejan marca.<\/p>\r\n            \r\n            <p class=\"hater-highlight\">Porque cuando algo SE HACE CON AMOR, no se odia: se comparte, se recuerda, se elige. \u00bfY por qu\u00e9 no? ENAMORA.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hater-about-image js-animate-image\">\r\n        <div class=\"image-wrapper\">\r\n            <img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Richard-2.png\" alt=\"Richard - Hater\">\r\n            <div class=\"hater-vertical-tag\">Richard Gervacio<\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* --- ESTILOS GENERALES (M\u00f3vil First \/ Fluido) --- *\/\r\n* {\r\n    box-sizing: border-box; \/* Evita que el padding rompa el ancho en celulares *\/\r\n}\r\n\r\n.hater-about-section {\r\n    background-color: #000000;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: clamp(60px, 10vh, 120px) 8%;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    font-family: 'Titillium Web', sans-serif;\r\n    gap: 40px;\r\n    overflow: hidden; \/* Evita scroll horizontal *\/\r\n}\r\n\r\n.hater-about-content { \r\n    flex: 1.2; \r\n    max-width: 650px; \r\n}\r\n\r\n.hater-about-tag { \r\n    color: #D5EE4A; \r\n    font-size: clamp(18px, 3vw, 24px); \r\n    font-weight: 200; \r\n    margin-bottom: 15px; \r\n    opacity: 0; \r\n}\r\n\r\n.hater-about-title { \r\n    font-size: clamp(38px, 6vw, 72px); \r\n    line-height: 0.95; \r\n    margin-bottom: 30px; \r\n    font-weight: 200; \r\n    word-break: break-word; \/* Evita que palabras largas rompan la pantalla *\/\r\n}\r\n\r\n.yellow-text { color: #D5EE4A; display: inline-block; }\r\n.white-text { color: #ffffff; display: inline-block; }\r\n\r\n.hater-about-description p { \r\n    color: #ffffff; \r\n    font-size: clamp(16px, 2vw, 18px); \r\n    font-weight: 200; \r\n    line-height: 1.35; \r\n    margin-bottom: 12px; \r\n    opacity: 0.85; \r\n}\r\n\r\n.hater-highlight { \r\n    font-weight: 400 !important; \r\n    opacity: 1 !important; \r\n    margin-top: 15px; \r\n}\r\n\r\n\/* --- IMAGEN Y TAG --- *\/\r\n.hater-about-image { \r\n    flex: 1; \r\n    display: flex; \r\n    justify-content: flex-end; \r\n    position: relative; \r\n    opacity: 0; \r\n    transform: translateX(50px); \r\n}\r\n\r\n.image-wrapper { \r\n    position: relative; \r\n    width: 100%; \r\n    max-width: 500px; \r\n}\r\n\r\n.hater-about-image img { \r\n    width: 100%; \r\n    height: auto; \r\n    display: block; \r\n}\r\n\r\n.hater-vertical-tag { \r\n    position: absolute; \r\n    right: -30px; \r\n    top: 50%; \r\n    transform: rotate(-90deg) translateY(-50%); \r\n    color: #D5EE4A; \r\n    font-size: 12px; \r\n    letter-spacing: 3px; \r\n    text-transform: uppercase; \r\n    font-weight: 300; \r\n    white-space: nowrap; \r\n}\r\n\r\n\/* --- ANIMACIONES CORREGIDAS --- *\/\r\n\/* Solo animamos los spans creados por JS (que no tienen clase), evitando romper los spans originales *\/\r\n.is-visible .js-bounce-text span:not([class]) {\r\n    display: inline-block;\r\n    opacity: 0;\r\n    transform: translateY(20px) scale(0.7);\r\n    filter: blur(3px);\r\n    animation: letterBounceFast 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\r\n}\r\n\r\n.is-visible .hater-about-tag { animation: fadeIn 0.5s forwards; }\r\n.is-visible .js-animate-image { animation: fadeInRight 0.8s ease forwards; }\r\n\r\n@keyframes letterBounceFast {\r\n    to { \r\n        opacity: 1; \r\n        transform: translateY(0) scale(1); \r\n        filter: blur(0px); \r\n    }\r\n}\r\n@keyframes fadeIn { to { opacity: 1; } }\r\n@keyframes fadeInRight { to { opacity: 1; transform: translateX(0); } }\r\n\r\n\r\n\/* =========================================\r\n   RESPONSIVE DESIGN (Tablets y Celulares)\r\n========================================= *\/\r\n\r\n\/* Tablets (hasta 992px) *\/\r\n@media (max-width: 992px) {\r\n    .hater-about-section { \r\n        flex-direction: column; \r\n        padding: 80px 5%;\r\n        gap: 60px;\r\n    }\r\n    \r\n    .hater-about-content {\r\n        max-width: 100%;\r\n    }\r\n\r\n    .hater-about-image { \r\n        justify-content: center; \r\n        width: 100%;\r\n    }\r\n\r\n    .image-wrapper {\r\n        max-width: 80%; \/* Evita que la foto sea gigantesca en tablet *\/\r\n    }\r\n}\r\n\r\n\/* Celulares (hasta 600px) *\/\r\n@media (max-width: 600px) {\r\n    .hater-about-section {\r\n        padding: 60px 20px;\r\n        text-align: left; \/* Mantiene la lectura limpia *\/\r\n    }\r\n\r\n    .hater-about-title {\r\n        font-size: 40px; \/* Tama\u00f1o controlado para evitar desbordes *\/\r\n    }\r\n\r\n    .image-wrapper {\r\n        max-width: 100%;\r\n    }\r\n\r\n    \/* Modificamos el tag vertical para que no genere \"scroll horizontal\" en el celular *\/\r\n    .hater-vertical-tag {\r\n        position: static;\r\n        transform: none;\r\n        display: block;\r\n        text-align: right;\r\n        margin-top: 15px;\r\n        font-size: 11px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const section = document.getElementById('haterSection');\r\n    const bounceContainers = document.querySelectorAll('.js-bounce-text');\r\n\r\n    bounceContainers.forEach(container => {\r\n        const content = container.innerHTML;\r\n        let result = \"\";\r\n        let isInsideTag = false;\r\n\r\n        for (let i = 0; i < content.length; i++) {\r\n            if (content[i] === '<') isInsideTag = true;\r\n            if (isInsideTag) {\r\n                result += content[i];\r\n            } else {\r\n                const char = content[i] === \" \" ? \"&nbsp;\" : content[i];\r\n                \/\/ Los spans generados por JS no llevan clase, lo que nos permite aislarlos en CSS\r\n                result += `<span>${char}<\/span>`;\r\n            }\r\n            if (content[i] === '>') isInsideTag = false;\r\n        }\r\n        container.innerHTML = result;\r\n\r\n        \/\/ Selecciona solo los spans de las letras (ignora los que tienen clases como .yellow-text)\r\n        const spans = container.querySelectorAll('span:not([class])');\r\n        spans.forEach((s, idx) => { \r\n            s.style.animationDelay = `${idx * 0.008}s`; \r\n        });\r\n    });\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.classList.add('is-visible');\r\n            } else {\r\n                \/\/ Si quieres que la animaci\u00f3n no se repita al subir, comenta la siguiente l\u00ednea\r\n                entry.target.classList.remove('is-visible');\r\n            }\r\n        });\r\n    }, { threshold: 0.1 });\r\n\r\n    observer.observe(section);\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fd39a0a e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"fd39a0a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d67786c elementor-widget elementor-widget-html\" data-id=\"d67786c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Titillium+Web:wght@300&display=swap');\r\n\r\n.premium-banner-container {\r\n    background-color: #000;\r\n    padding: 100px 20px;\r\n    text-align: center;\r\n    width: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    min-height: 50vh;\r\n    overflow: hidden;\r\n}\r\n\r\n.premium-banner-text {\r\n    font-family: 'Titillium Web', sans-serif !important;\r\n    font-weight: 300 !important;\r\n    font-size: 64px;\r\n    color: #D5EE4A;\r\n    line-height: 1.3;\r\n    margin: 0;\r\n    max-width: 1100px;\r\n}\r\n\r\n.neon-icon {\r\n    height: 64px;\r\n    width: auto;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    margin: 0 12px;\r\n    opacity: 0; \/* Ocultos hasta que la secci\u00f3n sea visible *\/\r\n}\r\n\r\n.icon-hand { stroke: #EFA94A; }\r\n.icon-bulb { stroke: #36C2C2; }\r\n\r\n\/* CLASE QUE ACTIVA LA ANIMACI\u00d3N (se a\u00f1ade con JS) *\/\r\n.animate-now span {\r\n    display: inline-block;\r\n    opacity: 0;\r\n    transform: translateY(-80px) rotateX(-90deg);\r\n    animation: dropInAndBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\r\n}\r\n\r\n.animate-now .neon-icon {\r\n    animation: fadeInIcon 0.5s forwards;\r\n    animation-delay: 0.5s; \/* Aparecen un poco despu\u00e9s del inicio de las letras *\/\r\n}\r\n\r\n@keyframes dropInAndBounce {\r\n    0% {\r\n        opacity: 0;\r\n        transform: translateY(-80px) rotateX(-90deg);\r\n        filter: blur(5px);\r\n    }\r\n    30% {\r\n        opacity: 1;\r\n        transform: translateY(0) rotateX(0deg);\r\n        filter: blur(0px);\r\n        text-shadow: 0 0 10px rgba(213, 238, 74, 0.7);\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        transform: translateY(0) rotateX(0deg);\r\n        filter: blur(0px);\r\n        text-shadow: none;\r\n    }\r\n}\r\n\r\n@keyframes fadeInIcon {\r\n    to { opacity: 1; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .premium-banner-text { font-size: 32px; }\r\n    .neon-icon { height: 32px; margin: 0 6px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"premium-banner-container\" id=\"scrollTriggerSection\">\r\n    <p class=\"premium-banner-text\" id=\"animatedTextEffect\"><\/p>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const textContainer = document.getElementById('animatedTextEffect');\r\n    const section = document.getElementById('scrollTriggerSection');\r\n    \r\n    const handSvg = `<svg class=\"neon-icon icon-hand\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v5\"\/><path d=\"M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v10\"\/><path d=\"M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v12.5\"\/><path d=\"M6 16V9a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v11a4 4 0 0 0 4 4h9a5 5 0 0 0 5-5v-6\"\/><path d=\"M10 18h4\"\/><\/svg>`;\r\n    const bulbSvg = `<svg class=\"neon-icon icon-bulb\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 14h.01\"\/><path d=\"M9 14h.01\"\/><path d=\"M12 18h.01\"\/><path d=\"M12 2v2\"\/><path d=\"M12 20v2\"\/><path d=\"M20 12h-2\"\/><path d=\"M6 12H4\"\/><path d=\"M17.657 4.343l-1.414 1.414\"\/><path d=\"M7.757 16.243l-1.414 1.414\"\/><path d=\"M17.657 19.657l-1.414-1.414\"\/><path d=\"M7.757 7.757L6.343 6.343\"\/><path d=\"M12 6a6 6 0 0 0-6 6c0 2.22 1.206 4.16 3 5.197\"\/><path d=\"M15 17.197A6 6 0 0 0 18 12a6 6 0 0 0-6-6Z\"\/><\/svg>`;\r\n\r\n    const content = `Entendemos el negocio.${handSvg}Detectamos<br>el insight real. Lo convertimos en idea.${bulbSvg}<br>Y lo ejecutamos sin miedo.`;\r\n\r\n    \/\/ 1. Pre-procesar el texto envolviendo letras en spans\r\n    let htmlResult = \"\";\r\n    let isInsideTag = false;\r\n    for (let i = 0; i < content.length; i++) {\r\n        if (content[i] === '<') isInsideTag = true;\r\n        if (isInsideTag) {\r\n            htmlResult += content[i];\r\n        } else {\r\n            const char = content[i] === \" \" ? \"&nbsp;\" : content[i];\r\n            htmlResult += `<span>${char}<\/span>`;\r\n        }\r\n        if (content[i] === '>') isInsideTag = false;\r\n    }\r\n    textContainer.innerHTML = htmlResult;\r\n\r\n    \/\/ 2. Asignar los delays una sola vez\r\n    const spans = textContainer.querySelectorAll('span');\r\n    spans.forEach((span, index) => {\r\n        span.style.animationDelay = `${index * 0.04}s`;\r\n    });\r\n\r\n    \/\/ 3. Configurar el Observador de Intersecci\u00f3n\r\n    const observerOptions = {\r\n        threshold: 0.3 \/\/ Se activa cuando el 30% de la secci\u00f3n es visible\r\n    };\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                \/\/ Si entra en pantalla, a\u00f1adimos la clase que dispara la animaci\u00f3n\r\n                textContainer.classList.add('animate-now');\r\n            } else {\r\n                \/\/ Si sale de pantalla, quitamos la clase para que se reinicie al volver\r\n                textContainer.classList.remove('animate-now');\r\n            }\r\n        });\r\n    }, observerOptions);\r\n\r\n    observer.observe(section);\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94dbcfa elementor-widget elementor-widget-html\" data-id=\"94dbcfa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Titillium+Web:wght@200;400&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"hater-premios-section\">\r\n    <h2 class=\"hater-premios-title\">Clientes<\/h2>\r\n\r\n    <div class=\"hater-logos-carousel-wrapper\">\r\n        <div class=\"hater-logos-carousel-track hater-move-right\">\r\n            \r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.001<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/QROMA.png\"><\/div><span class=\"logo-description\">QROMA<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.002<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/UTEC.png\"><\/div><span class=\"logo-description\">UTEC<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.003<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Confianza.png\"><\/div><span class=\"logo-description\">Financiero Confianza<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.004<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/apipharma.png\"><\/div><span class=\"logo-description\">Aphipharma<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.005<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/tgp.png\"><\/div><span class=\"logo-description\">TGP<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.006<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/backus.png\"><\/div><span class=\"logo-description\">Backus<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.007<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Imagina.png\"><\/div><span class=\"logo-description\">Imagina<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.008<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/wild.png\"><\/div><span class=\"logo-description\">Wild<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.009<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/centrum.png\"><\/div><span class=\"logo-description\">Centrum<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.010<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/inmater.png\"><\/div><span class=\"logo-description\">Inmater<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.011<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Healthy-media.png\"><\/div><span class=\"logo-description\">Healthy Media<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.012<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Concytec.png\"><\/div><span class=\"logo-description\">Concytec<\/span><\/div>\r\n            \r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.001<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/QROMA.png\"><\/div><span class=\"logo-description\">QROMA<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.002<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/UTEC.png\"><\/div><span class=\"logo-description\">UTEC<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.003<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Confianza.png\"><\/div><span class=\"logo-description\">Financiero Confianza<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.004<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/apipharma.png\"><\/div><span class=\"logo-description\">Aphipharma<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.005<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/tgp.png\"><\/div><span class=\"logo-description\">TGP<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.006<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/backus.png\"><\/div><span class=\"logo-description\">Backus<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.007<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Imagina.png\"><\/div><span class=\"logo-description\">Imagina<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.008<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/wild.png\"><\/div><span class=\"logo-description\">Wild<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.009<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/centrum.png\"><\/div><span class=\"logo-description\">Centrum<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.010<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/inmater.png\"><\/div><span class=\"logo-description\">Inmater<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.011<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Healthy-media.png\"><\/div><span class=\"logo-description\">Healthy Media<\/span><\/div>\r\n            <div class=\"hater-logo-item\"><span class=\"logo-counter\">.012<\/span><div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Concytec.png\"><\/div><span class=\"logo-description\">Concytec<\/span><\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* --- VARIABLES --- *\/\r\n:root {\r\n    --h-width: 280px;\r\n    --h-speed: 90s; \/* Velocidad lenta y elegante *\/\r\n}\r\n\r\n\/* --- SECCI\u00d3N --- *\/\r\n.hater-premios-section {\r\n    background-color: #000;\r\n    color: #fff;\r\n    font-family: 'Titillium Web', sans-serif;\r\n    width: 100%;\r\n    padding: 80px 0;\r\n    overflow: hidden;\r\n}\r\n\r\n.hater-premios-title {\r\n    font-weight: 200;\r\n    font-size: 32px;\r\n    color: #D5EE4A;\r\n    margin: 0 0 40px 8%;\r\n}\r\n\r\n.hater-logos-carousel-wrapper {\r\n    width: 100%;\r\n    overflow: hidden;\r\n    position: relative;\r\n    border-top: 1px solid rgba(213, 238, 74, 0.3);\r\n    border-bottom: 1px solid rgba(213, 238, 74, 0.3);\r\n}\r\n\r\n\/* --- TRACK (EL SECRETO EST\u00c1 AQU\u00cd) --- *\/\r\n.hater-logos-carousel-track {\r\n    display: flex;\r\n    width: max-content;\r\n}\r\n\r\n\/* Clase espec\u00edfica para mover a la derecha con nombre de animaci\u00f3n \u00fanico *\/\r\n.hater-move-right {\r\n    animation: HaterScrollRight var(--h-speed) linear infinite !important;\r\n}\r\n\r\n\/* Para ir a la derecha: \r\n   Empezamos en -50% (la mitad de la tira de logos) y llegamos a 0.\r\n*\/\r\n@keyframes HaterScrollRight {\r\n    0% { transform: translateX(-50%); } \r\n    100% { transform: translateX(0%); }\r\n}\r\n\r\n\/* --- ITEMS --- *\/\r\n.hater-logo-item {\r\n    width: var(--h-width); \r\n    height: 280px;\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-left: 1px solid rgba(213, 238, 74, 0.3); \r\n    position: relative;\r\n    padding: 40px;\r\n}\r\n\r\n.logo-counter {\r\n    position: absolute;\r\n    top: 15px;\r\n    left: 15px;\r\n    font-size: 10px;\r\n    color: #D5EE4A;\r\n}\r\n\r\n.logo-image-container img {\r\n    max-width: 80%;\r\n    filter: grayscale(1);\r\n    opacity: 0.6;\r\n    transition: 0.5s ease;\r\n}\r\n\r\n.hater-logo-item:hover img {\r\n    filter: grayscale(0);\r\n    opacity: 1;\r\n    transform: scale(1.1);\r\n}\r\n\r\n.logo-description {\r\n    position: absolute;\r\n    bottom: 25px;\r\n    right: 15px;\r\n    font-size: 8px;\r\n    color: #666;\r\n    writing-mode: vertical-rl;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* --- RESPONSIVO --- *\/\r\n@media (max-width: 768px) {\r\n    --h-width: 180px;\r\n    --h-speed: 45s;\r\n    .hater-logo-item { height: 180px; }\r\n}\r\n\r\n\/* Detener en PC al pasar el mouse *\/\r\n@media (hover: hover) {\r\n    .hater-logos-carousel-wrapper:hover .hater-logos-carousel-track {\r\n        animation-play-state: paused;\r\n    }\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-22e27bb e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"22e27bb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d59da5b elementor-widget elementor-widget-html\" data-id=\"d59da5b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Scroll Magn\u00e9tico de Secciones<\/title>\r\n    \r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Titillium+Web:wght@200;400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n    <style>\r\n        \/* 1. ESCENARIO MAESTRO: Ajustamos la altura a 400vh (100vh por secci\u00f3n) para un c\u00e1lculo perfecto *\/\r\n        .hater-3d-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 400vh; \r\n            background: #000;\r\n        }\r\n\r\n        \/* 2. C\u00c1MARA FIJA *\/\r\n        .hater-3d-sticky {\r\n            position: sticky;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100vh;\r\n            overflow: hidden;\r\n            background: #000;\r\n            perspective: 1500px;\r\n        }\r\n\r\n        \/* 3. MEN\u00da DE NAVEGACI\u00d3N *\/\r\n        .hater-3d-nav-layer {\r\n            position: absolute;\r\n            top: 0; \r\n            left: 0; \r\n            width: 100%; \r\n            height: 100%;\r\n            pointer-events: none; \r\n            z-index: 999;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: flex-end;\r\n            align-items: center;\r\n            padding-bottom: 70px;\r\n        }\r\n\r\n        .hater-3d-menu {\r\n            list-style: none !important;\r\n            margin: 0;\r\n            padding: 0;\r\n            text-align: center;\r\n        }\r\n\r\n        .h-3d-word {\r\n            font-family: 'Titillium Web', sans-serif;\r\n            font-size: clamp(10px, 1.2vw, 12px);\r\n            letter-spacing: 3px;\r\n            color: rgba(255, 255, 255, 0.3);\r\n            margin: 10px 0;\r\n            transition: all 0.25s ease;\r\n            text-transform: uppercase;\r\n            position: relative;\r\n            padding-bottom: 6px;\r\n            font-weight: 400;\r\n        }\r\n\r\n        .h-3d-word::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 2px;\r\n            background: #D5EE4A;\r\n            transition: width 0.25s ease;\r\n            transform: translateX(-50%);\r\n            box-shadow: 0 0 8px #d5ee4a;\r\n        }\r\n\r\n        .h-3d-word.active {\r\n            color: #D5EE4A !important;\r\n            font-weight: 700;\r\n            transform: scale(1.15);\r\n            text-shadow: 0 0 15px rgba(213, 238, 74, 0.5);\r\n            opacity: 1;\r\n        }\r\n\r\n        .h-3d-word.active::after { width: 100%; }\r\n\r\n        \/* 4. SLIDES Y CONTENIDOS *\/\r\n        .h-3d-slide {\r\n            position: absolute;\r\n            top: 0; left: 0;\r\n            width: 100%; height: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            background: #000;\r\n            \/* AQU\u00cd EST\u00c1 LA MAGIA: Una transici\u00f3n suave que evita cortes secos *\/\r\n            transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);\r\n        }\r\n\r\n        .h-3d-bg {\r\n            position: absolute;\r\n            top: 0; left: 0; \r\n            width: 100%; height: 100%;\r\n            z-index: 1;\r\n            \/* Transici\u00f3n para el efecto de escala del video *\/\r\n            transition: transform 1s cubic-bezier(0.7, 0, 0.3, 1);\r\n        }\r\n\r\n        .h-3d-bg video {\r\n            width: 100% !important;\r\n            height: 100% !important;\r\n            object-fit: cover !important;\r\n            display: block !important;\r\n            filter: brightness(0.4); \r\n            filter: grayscale(1);\r\n        }\r\n\r\n        .h-3d-content {\r\n            position: relative;\r\n            z-index: 20;\r\n            text-align: center;\r\n            \/* Transici\u00f3n para el efecto paralaje del texto *\/\r\n            transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);\r\n        }\r\n\r\n        .h-3d-title {\r\n            font-family: 'Titillium Web', sans-serif;\r\n            font-weight: 200;\r\n            font-size: clamp(35px, 8vw, 80px);\r\n            color: #D5EE4A;\r\n            margin: 0;\r\n        }\r\n\r\n        .h-3d-desc {\r\n            font-family: 'Titillium Web', sans-serif;\r\n            color: #fff;\r\n            font-size: clamp(14px, 4vw, 16px);\r\n            max-width: 480px;\r\n            margin: 20px auto 0;\r\n            opacity: 0.8;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"hater-3d-wrapper\" id=\"hater3dWrap\">\r\n        <div class=\"hater-3d-sticky\">\r\n            \r\n            <nav class=\"hater-3d-nav-layer\">\r\n                <ul class=\"hater-3d-menu\">\r\n                    <li class=\"h-3d-word active\">DIRECCI\u00d3N CREATIVA<\/li>\r\n                    <li class=\"h-3d-word\">INNOVACI\u00d3N<\/li>\r\n                    <li class=\"h-3d-word\">COPYWRITING<\/li>\r\n                    <li class=\"h-3d-word\">ESTRATEGIA<\/li>\r\n                <\/ul>\r\n            <\/nav>\r\n\r\n            <section class=\"h-3d-slide\" style=\"z-index: 4;\">\r\n                <div class=\"h-3d-bg\">\r\n                    <video autoplay muted loop playsinline class=\"haterVid\" loading=\"eager\">\r\n                        <source src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/envato_video_gen_Mar_26_2026_18_51_50-1.mp4\" type=\"video\/mp4\">\r\n                    <\/video>\r\n                <\/div>\r\n                <div class=\"h-3d-content\">\r\n                    <h2 class=\"h-3d-title\">Direcci\u00f3n creativa<\/h2>\r\n                    <p class=\"h-3d-desc\">Trabajo la idea desde el concepto hasta la ejecuci\u00f3n para que cada entrega tenga cabeza, forma y colmillo.<\/p>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section class=\"h-3d-slide\" style=\"z-index: 3;\">\r\n                <div class=\"h-3d-bg\">\r\n                    <video autoplay muted loop playsinline class=\"haterVid\" loading=\"eager\">\r\n                        <source src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/envato_video_gen_Mar_26_2026_14_48_50-1.mp4\" type=\"video\/mp4\">\r\n                    <\/video>\r\n                <\/div>\r\n                <div class=\"h-3d-content\">\r\n                    <h2 class=\"h-3d-title\">Innovaci\u00f3n<\/h2>\r\n                    <p class=\"h-3d-desc\">Siempre se puede hacer algo nuevo, un producto, una experiencia o una idea que rompen lo esperado.<\/p>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section class=\"h-3d-slide\" style=\"z-index: 2;\">\r\n                <div class=\"h-3d-bg\">\r\n                    <video autoplay muted loop playsinline class=\"haterVid\" loading=\"eager\">\r\n                        <source src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/envato_video_gen_Mar_26_2026_18_47_05.mp4\" type=\"video\/mp4\">\r\n                    <\/video>\r\n                <\/div>\r\n                <div class=\"h-3d-content\">\r\n                    <h2 class=\"h-3d-title\">Copywriting<\/h2>\r\n                    <p class=\"h-3d-desc\">A\u00fan no llego a Hollywood pero puedo hacer un Storytelling que convierte mensajes en contenido que la gente quiere ver.<\/p>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <section class=\"h-3d-slide\" style=\"z-index: 1;\">\r\n                <div class=\"h-3d-bg\">\r\n                    <video autoplay muted loop playsinline class=\"haterVid\" loading=\"eager\">\r\n                        <source src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/envato_video_gen_Mar_26_2026_18_43_58-1.mp4\" type=\"video\/mp4\">\r\n                    <\/video>\r\n                <\/div>\r\n                <div class=\"h-3d-content\">\r\n                    <h2 class=\"h-3d-title\">Estrategia<\/h2>\r\n                    <p class=\"h-3d-desc\">Antes de pensar, piso el charco para buscar tensiones personales,culturales o sociales que puedan ser insights poderosos.<\/p>\r\n                <\/div>\r\n            <\/section>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            const wrap = document.getElementById('hater3dWrap');\r\n            const slides = document.querySelectorAll('.h-3d-slide');\r\n            const menuWords = document.querySelectorAll('.h-3d-word');\r\n            const videos = document.querySelectorAll('.haterVid');\r\n\r\n            videos.forEach(vid => {\r\n                vid.playbackRate = 0.4;\r\n            });\r\n\r\n            const syncScroll = () => {\r\n                const rect = wrap.getBoundingClientRect();\r\n                const scrollDistancePerSlide = window.innerHeight; \/\/ 100vh exactos de separaci\u00f3n\r\n                \r\n                let scrolled = -rect.top;\r\n                if (scrolled < 0) scrolled = 0;\r\n\r\n                \/\/ Utilizamos Math.round para forzar que el valor siempre sea un entero (0, 1, 2 o 3)\r\n                \/\/ Esto garantiza que NUNCA exista un estado a la mitad.\r\n                let activeIndex = Math.round(scrolled \/ scrollDistancePerSlide);\r\n                activeIndex = Math.max(0, Math.min(slides.length - 1, activeIndex));\r\n\r\n                \/\/ 1. ACTUALIZAR MEN\u00da\r\n                menuWords.forEach(w => w.classList.remove('active'));\r\n                if (menuWords[activeIndex]) {\r\n                    menuWords[activeIndex].classList.add('active');\r\n                }\r\n\r\n                \/\/ 2. EFECTO MAGN\u00c9TICO (Cero divisiones en pantalla)\r\n                slides.forEach((slide, i) => {\r\n                    const bg = slide.querySelector('.h-3d-bg');\r\n                    const content = slide.querySelector('.h-3d-content');\r\n\r\n                    if (i < activeIndex) {\r\n                        \/\/ Las secciones pasadas se van arriba completamente\r\n                        slide.style.transform = `translateY(-100%)`;\r\n                        bg.style.transform = `scale(1)`;\r\n                        content.style.transform = `translateY(40px)`; \r\n                    } else if (i === activeIndex) {\r\n                        \/\/ La secci\u00f3n actual se clava en el centro por completo\r\n                        slide.style.transform = `translateY(0%)`;\r\n                        bg.style.transform = `scale(1.1)`; \r\n                        content.style.transform = `translateY(0px)`;\r\n                    } else {\r\n                        \/\/ Las secciones futuras esperan quietas abajo \r\n                        slide.style.transform = `translateY(0%)`;\r\n                        bg.style.transform = `scale(1.1)`;\r\n                        content.style.transform = `translateY(0px)`;\r\n                    }\r\n                });\r\n            };\r\n\r\n            window.addEventListener('scroll', syncScroll, { passive: true });\r\n            syncScroll();\r\n        });\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3f420ff e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"3f420ff\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8019fb3 elementor-widget elementor-widget-html\" data-id=\"8019fb3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Titillium+Web:wght@200;300;400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"hater-premios-section\">\r\n    <h2 class=\"hater-premios-title\">Premios<\/h2>\r\n\r\n    <div class=\"hater-logos-carousel-wrapper\">\r\n        <div class=\"hater-logos-carousel-track\">\r\n            \r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.001<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Cannes.png\" alt=\"Cannes\"><\/div>\r\n                <span class=\"logo-description\">Cannes<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.002<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Clio.png\" alt=\"Clio\"><\/div>\r\n                <span class=\"logo-description\">Premios Clio<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.003<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Confianza.png\" alt=\"Confianza\"><\/div>\r\n                <span class=\"logo-description\">Financiero Confianza<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.004<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/ONE.png\" alt=\"ONE\"><\/div>\r\n                <span class=\"logo-description\">The One Show<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.005<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/WINA.png\" alt=\"WINA\"><\/div>\r\n                <span class=\"logo-description\">WINA<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.006<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/LA.png\" alt=\"LA\"><\/div>\r\n                <span class=\"logo-description\">L[A]<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.007<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/DIGI.png\" alt=\"DIGI\"><\/div>\r\n                <span class=\"logo-description\">DIGI AWARDS<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.001<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Cannes.png\" alt=\"Cannes\"><\/div>\r\n                <span class=\"logo-description\">Cannes<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.002<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Clio.png\" alt=\"Clio\"><\/div>\r\n                <span class=\"logo-description\">Premios Clio<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.003<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/Confianza.png\" alt=\"Confianza\"><\/div>\r\n                <span class=\"logo-description\">Financiero Confianza<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.004<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/ONE.png\" alt=\"ONE\"><\/div>\r\n                <span class=\"logo-description\">The One Show<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.005<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/WINA.png\" alt=\"WINA\"><\/div>\r\n                <span class=\"logo-description\">WINA<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.006<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/LA.png\" alt=\"LA\"><\/div>\r\n                <span class=\"logo-description\">L[A]<\/span>\r\n            <\/div>\r\n            <div class=\"hater-logo-item\">\r\n                <span class=\"logo-counter\">.007<\/span>\r\n                <div class=\"logo-image-container\"><img decoding=\"async\" src=\"https:\/\/hater.pe\/wp-content\/uploads\/2026\/03\/DIGI.png\" alt=\"DIGI\"><\/div>\r\n                <span class=\"logo-description\">DIGI AWARDS<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.hater-premios-section {\r\n    background-color: #000000;\r\n    color: #ffffff;\r\n    font-family: 'Titillium Web', sans-serif;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding: 80px 0;\r\n    overflow: hidden;\r\n}\r\n\r\n.hater-premios-title {\r\n    font-weight: 200;\r\n    font-size: 32px;\r\n    color: #D5EE4A;\r\n    margin: 0 0 50px 0;\r\n    padding-left: 10%;\r\n    line-height: 1;\r\n}\r\n\r\n.hater-logos-carousel-wrapper {\r\n    width: 100%;\r\n    overflow: hidden;\r\n    position: relative;\r\n    border-top: 1.5px solid rgba(213, 238, 74, 0.4); \r\n    border-bottom: 1.5px solid rgba(213, 238, 74, 0.4);\r\n}\r\n\r\n.hater-logos-carousel-track {\r\n    display: flex;\r\n    width: max-content;\r\n    \/* CAMBIO: 50 segundos para que sea m\u00e1s lento *\/\r\n    animation: scrollLogos 50s linear infinite;\r\n}\r\n\r\n.hater-logo-item {\r\n    width: 280px; \r\n    flex-shrink: 0;\r\n    height: 280px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 30px;\r\n    border-left: 1.5px solid rgba(213, 238, 74, 0.4); \r\n    position: relative;\r\n    text-align: center;\r\n}\r\n\r\n.logo-counter {\r\n    position: absolute;\r\n    top: 12px;\r\n    left: 12px;\r\n    font-size: 11px;\r\n    color: #D5EE4A;\r\n    font-weight: 400;\r\n}\r\n\r\n.logo-image-container {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 100%;\r\n}\r\n\r\n.logo-image-container img {\r\n    max-width: 160px;\r\n    max-height: 100px;\r\n    height: auto;\r\n    width: auto;\r\n    filter: none;\r\n    opacity: 1;\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.hater-logo-item:hover img {\r\n    transform: scale(1.1);\r\n}\r\n\r\n.logo-description {\r\n    position: absolute;\r\n    bottom: 40px;\r\n    right: 12px;\r\n    font-size: 9px;\r\n    color: #666;\r\n    text-transform: uppercase;\r\n    writing-mode: vertical-rl;\r\n    white-space: nowrap;\r\n}\r\n\r\n\/* CAMBIO: Sentido inverso (de izquierda a derecha) *\/\r\n@keyframes scrollLogos {\r\n    0% { transform: translateX(-50%); }\r\n    100% { transform: translateX(0); } \r\n}\r\n\r\n.hater-logos-carousel-wrapper:hover .hater-logos-carousel-track {\r\n    animation-play-state: paused;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .hater-logo-item { width: 200px; height: 200px; }\r\n    .logo-image-container img { max-width: 110px; }\r\n}\r\n<\/style>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&#x2715; About us Director creativo\/ Copywriter \u201cSoy hater y odio la publicidad\u201d La que estorba. La que finge. La que habla sin tener nada que decir. Pero soy un lover de las ideas que incomodan. Que despiertan. Que dejan marca. Porque cuando algo SE HACE CON AMOR, no se odia: se comparte, se recuerda, se elige. \u00bfY por qu\u00e9 no? ENAMORA. Richard Gervacio Clientes .001QROMA .002UTEC .003Financiero Confianza .004Aphipharma .005TGP .006Backus .007Imagina .008Wild .009Centrum .010Inmater .011Healthy Media .012Concytec .001QROMA .002UTEC .003Financiero Confianza .004Aphipharma .005TGP .006Backus .007Imagina .008Wild .009Centrum .010Inmater .011Healthy Media .012Concytec Scroll Magn\u00e9tico de Secciones DIRECCI\u00d3N CREATIVA INNOVACI\u00d3N COPYWRITING ESTRATEGIA Direcci\u00f3n creativa Trabajo la idea desde el concepto hasta la ejecuci\u00f3n para que cada entrega tenga cabeza, forma y colmillo. Innovaci\u00f3n Siempre se puede hacer algo nuevo, un producto, una experiencia o una idea que rompen lo esperado. Copywriting A\u00fan no llego a Hollywood pero puedo hacer un Storytelling que convierte mensajes en contenido que la gente quiere ver. Estrategia Antes de pensar, piso el charco para buscar tensiones personales,culturales o sociales que puedan ser insights poderosos. Premios .001 Cannes .002 Premios Clio .003 Financiero Confianza .004 The One Show .005 WINA .006 L[A] .007 DIGI AWARDS .001 Cannes .002 Premios Clio .003 Financiero Confianza .004 The One Show .005 WINA .006 L[A] .007 DIGI AWARDS<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-721","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hater.pe\/index.php\/wp-json\/wp\/v2\/pages\/721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hater.pe\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hater.pe\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hater.pe\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hater.pe\/index.php\/wp-json\/wp\/v2\/comments?post=721"}],"version-history":[{"count":427,"href":"https:\/\/hater.pe\/index.php\/wp-json\/wp\/v2\/pages\/721\/revisions"}],"predecessor-version":[{"id":2395,"href":"https:\/\/hater.pe\/index.php\/wp-json\/wp\/v2\/pages\/721\/revisions\/2395"}],"wp:attachment":[{"href":"https:\/\/hater.pe\/index.php\/wp-json\/wp\/v2\/media?parent=721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}