{"id":616,"date":"2026-08-27T20:14:28","date_gmt":"2026-08-27T20:14:28","guid":{"rendered":"https:\/\/vagar.cl\/?p=616"},"modified":"2026-08-28T03:45:24","modified_gmt":"2026-08-28T03:45:24","slug":"ultranav","status":"publish","type":"post","link":"https:\/\/vagar.cl\/?p=616","title":{"rendered":"Ultranav"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n.portfolio-accordion-gallery {\n  display: flex;\n  gap: 16px;\n  width: 100%;\n  max-width: 1920px;\n  height: 520px;\n  margin: 40px auto;\n  box-sizing: border-box;\n}\n\n.gallery-card {\n  position: relative;\n  flex: 0.7;\n  height: 100%;\n  border-radius: 16px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), \n              transform 0.4s ease, \n              filter 0.4s ease;\n  filter: brightness(0.88);\n}\n\n.gallery-card:hover {\n  transform: translateY(-4px);\n  filter: brightness(0.98);\n}\n\n.gallery-card.active {\n  flex: 4;\n  filter: brightness(1);\n  cursor: default;\n}\n\n.gallery-card img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 16px;\n  transition: transform 0.6s ease;\n}\n\n.gallery-card.active img {\n  transform: scale(1.02);\n}\n\n@media (max-width: 768px) {\n  .portfolio-accordion-gallery {\n    flex-direction: column;\n    height: 800px;\n  }\n  .gallery-card {\n    flex: 1;\n  }\n  .gallery-card.active {\n    flex: 3;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nfunction activateCard(element) {\n  if (element.classList.contains('active')) return;\n\n  const cards = document.querySelectorAll('.portfolio-accordion-gallery .gallery-card');\n  cards.forEach(card => card.classList.remove('active'));\n\n  element.classList.add('active');\n}\n<\/script>\n\n<div class=\"portfolio-accordion-gallery\">\n  <!-- Imagen 1 (Activa por defecto) -->\n  <div class=\"gallery-card active\" onclick=\"activateCard(this)\">\n    <img decoding=\"async\" src=\"https:\/\/vagar.cl\/wp-content\/uploads\/2026\/08\/escena_ultranav_1.jpg\">\n  <\/div>\n\n  <!-- Imagen 2 -->\n  <div class=\"gallery-card\" onclick=\"activateCard(this)\">\n    <img decoding=\"async\" src=\"https:\/\/vagar.cl\/wp-content\/uploads\/2026\/08\/escena_ultranav_2.jpg\">\n  <\/div>\n\n  <!-- Imagen 3 -->\n  <div class=\"gallery-card\" onclick=\"activateCard(this)\">\n    <img decoding=\"async\" src=\"https:\/\/vagar.cl\/wp-content\/uploads\/2026\/08\/escena_ultranav_3.jpg\">\n  <\/div>\n\n  <!-- Imagen 4 -->\n  <div class=\"gallery-card\" onclick=\"activateCard(this)\">\n    <img decoding=\"async\" src=\"https:\/\/vagar.cl\/wp-content\/uploads\/2026\/08\/gif_ultranav_motion-graphic.gif\">\n  <\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Ultranav: Motion graphic cyber security\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JJ9K_vjD8ik?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"alignwide wp-block-paragraph\">Proyecto que consisti\u00f3 en el desarrollo de una pieza audiovisual para la naviera Ultranav con enfoque en ciber seguridad. Trabajo con ilustraci\u00f3n y motion graphics. Contempl\u00f3 la creaci\u00f3n de recursos gr\u00e1ficos, composici\u00f3n, color, formas y jerarqu\u00eda visual para construir una narrativa gr\u00e1fica. Posteriormente, las piezas fueron adaptadas y animadas mediante t\u00e9cnicas de motion graphics, incorporando movimiento, transiciones. <br><br><a href=\"https:\/\/ultranav.cl\/\">https:\/\/ultranav.cl\/<\/a><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Proyecto que consisti\u00f3 en el desarrollo de una pieza audiovisual para la naviera Ultranav con enfoque en ciber seguridad. Trabajo con ilustraci\u00f3n y motion graphics. Contempl\u00f3 la creaci\u00f3n de recursos gr\u00e1ficos, composici\u00f3n, color, formas y jerarqu\u00eda visual para construir una narrativa gr\u00e1fica. Posteriormente, las piezas fueron adaptadas y animadas mediante t\u00e9cnicas de motion graphics, incorporando [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_angie_page":false,"page_builder":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-616","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/vagar.cl\/index.php?rest_route=\/wp\/v2\/posts\/616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vagar.cl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vagar.cl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vagar.cl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vagar.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=616"}],"version-history":[{"count":10,"href":"https:\/\/vagar.cl\/index.php?rest_route=\/wp\/v2\/posts\/616\/revisions"}],"predecessor-version":[{"id":681,"href":"https:\/\/vagar.cl\/index.php?rest_route=\/wp\/v2\/posts\/616\/revisions\/681"}],"wp:attachment":[{"href":"https:\/\/vagar.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vagar.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vagar.cl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}