{"id":14717,"date":"2026-01-15T15:02:15","date_gmt":"2026-01-15T15:02:15","guid":{"rendered":"https:\/\/www.tiritaito.com\/blog\/?page_id=14717"},"modified":"2026-01-30T13:05:53","modified_gmt":"2026-01-30T13:05:53","slug":"novedades-app","status":"publish","type":"page","link":"https:\/\/www.tiritaito.com\/blog\/novedades-app\/","title":{"rendered":"Novedades APP"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-right:0px;--awb-padding-bottom:0px;--awb-padding-left:0px;--awb-margin-top:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><style>\n\/* ===== NOVEDADES iOS STYLE CON ANIMACIONES ===== *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n.novedades-section {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: #f7f7f8;\n  padding: 80px 16px;\n  -webkit-font-smoothing: antialiased;\n}\n\n.novedades-container {\n  max-width: 1280px;\n  margin: 0 auto;\n}\n\n\/* Header animations *\/\n.novedades-header {\n  text-align: center;\n  margin-bottom: 64px;\n}\n\n.novedades-header .subtitle {\n  display: inline-block;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.2em;\n  color: #71717a;\n  margin-bottom: 16px;\n  opacity: 0;\n  transform: translateY(20px);\n  animation: fadeInUp 0.6s ease forwards 0.1s;\n}\n\n.novedades-header h2 {\n  font-size: clamp(32px, 6vw, 56px);\n  font-weight: 700;\n  color: #18181b;\n  margin: 0 0 24px 0;\n  letter-spacing: -0.02em;\n  opacity: 0;\n  transform: translateY(20px);\n  animation: fadeInUp 0.6s ease forwards 0.2s;\n}\n\n.novedades-header .divider {\n  width: 64px;\n  height: 4px;\n  background: #18181b;\n  border-radius: 4px;\n  margin: 0 auto;\n  opacity: 0;\n  transform: scaleX(0);\n  animation: scaleIn 0.6s ease forwards 0.4s;\n}\n\n@keyframes fadeInUp {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes scaleIn {\n  to {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n}\n\n\/* Grid Layout *\/\n.novedades-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n@media (min-width: 768px) {\n  .novedades-grid {\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n  }\n}\n\n\/* Featured Card - Large *\/\n.novedad-card.featured {\n  grid-column: span 2;\n  grid-row: span 2;\n}\n\n\/* Card Base with animation *\/\n.novedad-card {\n  position: relative;\n  overflow: hidden;\n  border-radius: 20px;\n  background: #fff;\n  box-shadow: 0 2px 20px -4px rgba(24, 24, 27, 0.08),\n              0 4px 40px -8px rgba(24, 24, 27, 0.06);\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: pointer;\n  text-decoration: none;\n  display: block;\n  opacity: 0;\n  transform: translateY(40px) scale(0.95);\n  animation: cardEntrance 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n}\n\n.novedad-card:nth-child(1) { animation-delay: 0.3s; }\n.novedad-card:nth-child(2) { animation-delay: 0.4s; }\n.novedad-card:nth-child(3) { animation-delay: 0.5s; }\n.novedad-card:nth-child(4) { animation-delay: 0.6s; }\n.novedad-card:nth-child(5) { animation-delay: 0.7s; }\n\n@keyframes cardEntrance {\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.novedad-card:hover {\n  transform: scale(1.02);\n  box-shadow: 0 8px 40px -8px rgba(24, 24, 27, 0.15),\n              0 16px 60px -12px rgba(24, 24, 27, 0.1);\n}\n\n\/* NEW INDICATOR - Red dot *\/\n.new-indicator {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  z-index: 10;\n  width: 12px;\n  height: 12px;\n}\n\n.new-indicator .ping {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background: #f87171;\n  opacity: 0.75;\n  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n\n.new-indicator .dot {\n  position: relative;\n  display: block;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #f43f5e;\n}\n\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n\n.new-indicator.hidden {\n  display: none;\n}\n\n\/* Media Container *\/\n.novedad-media {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n.novedad-card:not(.featured) .novedad-media {\n  aspect-ratio: 4\/5;\n}\n\n.novedad-card.featured .novedad-media {\n  aspect-ratio: 1\/1;\n}\n\n@media (min-width: 768px) {\n  .novedad-card.featured .novedad-media {\n    aspect-ratio: 4\/3;\n  }\n}\n\n.novedad-media img,\n.novedad-media video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.novedad-card:hover .novedad-media img,\n.novedad-card:hover .novedad-media video {\n  transform: scale(1.05);\n}\n\/* Play Button Overlay *\/\n.video-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.2);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.novedad-card:hover .video-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.9);\n  backdrop-filter: blur(8px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  transition: transform 0.3s ease;\n  border: none;\n  cursor: pointer;\n}\n\n.novedad-card.featured .play-button {\n  width: 80px;\n  height: 80px;\n}\n\n.play-button:hover {\n  transform: scale(1.1);\n}\n\n.play-button svg {\n  width: 20px;\n  height: 20px;\n  fill: #18181b;\n  margin-left: 4px;\n}\n\n.novedad-card.featured .play-button svg {\n  width: 32px;\n  height: 32px;\n}\n\n\/* Content Overlay *\/\n.novedad-content {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 48px 16px 16px;\n  background: linear-gradient(to top, \n    rgba(0, 0, 0, 0.8) 0%, \n    rgba(0, 0, 0, 0.4) 60%, \n    transparent 100%);\n}\n\n.novedad-card.featured .novedad-content {\n  padding: 96px 24px 24px;\n}\n\n.novedad-date {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 8px;\n}\n\n.novedad-card.featured .novedad-date {\n  font-size: 14px;\n}\n\n.novedad-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  margin: 0 0 4px 0;\n  line-height: 1.3;\n}\n\n.novedad-card.featured .novedad-title {\n  font-size: 24px;\n}\n\n.novedad-description {\n  font-size: 14px;\n  color: rgba(255, 255, 255, 0.8);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.novedad-card.featured .novedad-description {\n  font-size: 16px;\n}\n\n\/* Ver m\u00e1s button *\/\n.novedades-cta {\n  text-align: center;\n  margin-top: 64px;\n  opacity: 0;\n  transform: translateY(30px);\n  animation: fadeInUp 0.6s ease forwards 0.8s;\n}\n\n.novedades-cta button {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: #18181b;\n  color: #fff;\n  border: none;\n  padding: 16px 32px;\n  border-radius: 50px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  font-family: inherit;\n}\n\n.novedades-cta button:hover {\n  background: #27272a;\n  box-shadow: 0 8px 24px rgba(24, 24, 27, 0.2);\n}\n\n.novedades-cta button svg {\n  width: 16px;\n  height: 16px;\n  transition: transform 0.3s ease;\n}\n\n.novedades-cta button:hover svg {\n  transform: translateX(4px);\n}\n<\/style>\n\n<section class=\"novedades-section\">\n  <div class=\"novedades-container\">\n    <!-- Header -->\n    <div class=\"novedades-header\">\n      <span class=\"subtitle\">Lo m\u00e1s reciente<\/span>\n      <h2>Novedades<\/h2>\n      <div class=\"divider\"><\/div>\n    <\/div>\n\n    <!-- Grid -->\n    <div class=\"novedades-grid\">\n      <!-- NOVEDAD DESTACADA (Grande) -->\n      <a href=\"https:\/\/www.tiritaito.com\/blog\/rosario\/el-rincon-de-nico\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"novedad-card featured\" data-id=\"1\" onclick=\"markAsViewed(this)\">\n        <div class=\"new-indicator\">\n          <span class=\"ping\"><\/span>\n          <span class=\"dot\"><\/span>\n        <\/div>\n        <div class=\"novedad-media\">\n          <img decoding=\"async\" src=\"https:\/\/www.tiritaito.com\/blog\/wp-content\/uploads\/2026\/01\/Novedad-Nico.webp\" alt=\"Nuevos Horizontes\">\n        <\/div>\n        <div class=\"novedad-content\">\n          <span class=\"novedad-date\">15 Enero 2026<\/span>\n          <h3 class=\"novedad-title\">Nuevos Horizontes<\/h3>\n          <p class=\"novedad-description\">Descubre los paisajes m\u00e1s impresionantes de esta temporada<\/p>\n        <\/div>\n      <\/a>\n\n      <!-- NOVEDAD 2 (Video peque\u00f1o) -->\n      <a href=\"https:\/\/tu-url-aqui.com\/novedad-2\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"novedad-card\" data-id=\"2\" data-type=\"video\" onclick=\"markAsViewed(this)\">\n<div class=\"new-indicator\">\n          <span class=\"ping\"><\/span>\n          <span class=\"dot\"><\/span>\n        <\/div>\n        <div class=\"novedad-media\">\n          <video poster=\"https:\/\/www.tiritaito.com\/blog\/la-hora-de-la-brisa-2\/\" loop muted playsinline>\n            <source src=\"https:\/\/www.tiritaito.com\/blog\/wp-content\/uploads\/2026\/01\/FILE-2026-01-09-092553.mp4\" type=\"video\/mp4\">\n          <\/video>\n          <div class=\"video-overlay\">\n            <button class=\"play-button\" onclick=\"toggleVideo(event, this)\">\n              <svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n        <div class=\"novedad-content\">\n          <span class=\"novedad-date\">12 Enero 2026<\/span>\n          <h3 class=\"novedad-title\">Experiencia Inmersiva<\/h3>\n          <p class=\"novedad-description\">Una nueva forma de vivir cada momento<\/p>\n        <\/div>\n      <\/a>\n\n      <!-- NOVEDAD 3 (Imagen peque\u00f1a) -->\n      <a href=\"https:\/\/www.tiritaito.com\/blog\/seminarios\/seminarios-jovenes\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"novedad-card\" data-id=\"3\" onclick=\"markAsViewed(this)\">\n        <div class=\"new-indicator\">\n          <span class=\"ping\"><\/span>\n          <span class=\"dot\"><\/span>\n        <\/div>\n        <div class=\"novedad-media\">\n          <img decoding=\"async\" src=\"https:\/\/www.tiritaito.com\/blog\/wp-content\/uploads\/2026\/01\/Adoracion-241125.webp\" alt=\"Naturaleza Viva\">\n        <\/div>\n        <div class=\"novedad-content\">\n          <span class=\"novedad-date\">10 Enero 2026<\/span>\n          <h3 class=\"novedad-title\">Naturaleza Viva<\/h3>\n        <\/div>\n      <\/a>\n\n      <!-- NOVEDAD 4 (Imagen peque\u00f1a) -->\n      <a href=\"https:\/\/www.tiritaito.com\/blog\/seminarios\/seminarios-jovenes\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"novedad-card\" data-id=\"4\" onclick=\"markAsViewed(this)\">\n        <div class=\"new-indicator\">\n          <span class=\"ping\"><\/span>\n          <span class=\"dot\"><\/span>\n        <\/div>\n        <div class=\"novedad-media\">\n          <img decoding=\"async\" src=\"https:\/\/www.tiritaito.com\/blog\/wp-content\/uploads\/2025\/12\/IMAGE-2025-12-29-205344.jpg\" alt=\"Momentos \u00danicos\">\n        <\/div>\n        <div class=\"novedad-content\">\n          <span class=\"novedad-date\">8 Enero 2026<\/span>\n          <h3 class=\"novedad-title\">Momentos \u00danicos<\/h3>\n          <p class=\"novedad-description\">Capturando la esencia de cada instante<\/p>\n        <\/div>\n      <\/a>\n\n      <!-- NOVEDAD 5 (Video peque\u00f1o) -->\n      <a href=\"https:\/\/tu-url-aqui.com\/novedad-5\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"novedad-card\" data-id=\"5\" data-type=\"video\" onclick=\"markAsViewed(this)\">\n        <div class=\"new-indicator\">\n          <span class=\"ping\"><\/span>\n          <span class=\"dot\"><\/span>\n        <\/div>\n        <div class=\"novedad-media\">\n          <video poster=\"https:\/\/www.tiritaito.com\/blog\/la-hora-de-la-brisa-2\/\" loop muted playsinline>\n            <source src=\"https:\/\/www.tiritaito.com\/blog\/wp-content\/uploads\/2026\/01\/IMG_1861.mov\" type=\"video\/mp4\">\n          <\/video>\n          <div class=\"video-overlay\">\n            <button class=\"play-button\" onclick=\"toggleVideo(event, this)\">\n              <svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n            <\/button>\n          <\/div>\n        <\/div>\n        <div class=\"novedad-content\">\n          <span class=\"novedad-date\">5 Enero 2026<\/span>\n          <h3 class=\"novedad-title\">Aventura Sin L\u00edmites<\/h3>\n        <\/div>\n      <\/a>\n    <\/div>\n\n    <!-- CTA Button -->\n    <div class=\"novedades-cta\">\n      <button onclick=\"window.location.href='https:\/\/tu-pagina.com\/novedades'\">\n        Ver todas las novedades\n        <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\/>\n        <\/svg>\n      <\/button>\n    <\/div>\n  <\/div>\n<\/section>\n<script>\n\/\/ Check viewed items on page load\ndocument.addEventListener('DOMContentLoaded', function() {\n  var viewedItems = JSON.parse(localStorage.getItem('viewedNovedades') || '[]');\n  \n  document.querySelectorAll('.novedad-card').forEach(function(card) {\n    var id = card.getAttribute('data-id');\n    if (viewedItems.includes(id)) {\n      var indicator = card.querySelector('.new-indicator');\n      if (indicator) {\n        indicator.classList.add('hidden');\n      }\n    }\n  });\n});\n\n\/\/ Mark item as viewed when clicked\nfunction markAsViewed(card) {\n  var id = card.getAttribute('data-id');\n  var viewedItems = JSON.parse(localStorage.getItem('viewedNovedades') || '[]');\n  \n  if (!viewedItems.includes(id)) {\n    viewedItems.push(id);\n    localStorage.setItem('viewedNovedades', JSON.stringify(viewedItems));\n    \n    var indicator = card.querySelector('.new-indicator');\n    if (indicator) {\n      indicator.classList.add('hidden');\n    }\n  }\n}\n\n\/\/ Toggle video play\/pause\nfunction toggleVideo(event, button) {\n  event.preventDefault();\n  event.stopPropagation();\n  \n  var card = button.closest('.novedad-card');\n  var video = card.querySelector('video');\n  var svg = button.querySelector('svg');\n  \n  if (video.paused) {\n    video.play();\n    svg.innerHTML = '<rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"\/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"\/>';\n  } else {\n    video.pause();\n    svg.innerHTML = '<path d=\"M8 5v14l11-7z\"\/>';\n  }\n}\n<\/script><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-margin-top:90px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><style>\n:root {\n  --nav-bg: #ffffff;\n  --nav-border: #e5e7eb;\n  --nav-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);\n  --nav-active: #b23a3a; \/* rojo m\u00e1s clarito *\/\n  --nav-inactive: #6b7280;\n  --nav-hover: #1f2937;\n}\n\n\/* ============================= *\/\n\/* CONTENEDOR MEN\u00da *\/\n\/* ============================= *\/\n\n.bottom-nav {\n  position: fixed;\n  bottom: 8px;\n  left: 8px;\n  right: 8px;\n  z-index: 9999;\n  background: var(--nav-bg);\n  border: 1px solid var(--nav-border);\n  box-shadow: var(--nav-shadow);\n  animation: slideUpBounce 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n  opacity: 0;\n  transform: translateY(100%);\n  overflow: hidden;\n  margin: 0 auto;\n  border-radius: 35px;\n  transition:\n    width 1.2s cubic-bezier(0.22, 1, 0.36, 1),\n    border-radius 0.8s ease;\n}\n\n\/* ============================= *\/\n\/* EFECTO P\u00cdLDORA *\/\n\/* ============================= *\/\n\n.bottom-nav.pill-start {\n  width: 72px;\n  border-radius: 999px;\n}\n\n.bottom-nav.pill-open {\n  width: calc(100% - 16px);\n  border-radius: 35px;\n}\n\n.bottom-nav.pill-start .bottom-nav-container {\n  opacity: 0;\n  transform: scale(0.95);\n}\n\n.bottom-nav.pill-open .bottom-nav-container {\n  opacity: 1;\n  transform: scale(1);\n  transition:\n    opacity 0.6s ease 0.6s,\n    transform 0.6s ease 0.6s;\n}\n\n\/* ============================= *\/\n\/* ANIMACI\u00d3N ENTRADA *\/\n\/* ============================= *\/\n\n@keyframes slideUpBounce {\n  0% { opacity: 0; transform: translateY(100%); }\n  60% { opacity: 1; transform: translateY(-6px); }\n  100% { opacity: 1; transform: translateY(0); }\n}\n\n\/* ============================= *\/\n\/* CONTENIDO *\/\n\/* ============================= *\/\n\n.bottom-nav-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  height: 64px;\n  max-width: 600px;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n\n\/* ============================= *\/\n\/* ITEMS *\/\n\/* ============================= *\/\n\n.nav-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 8px 10px;\n  text-decoration: none;\n  transition: all 0.3s ease;\n  min-width: 60px;\n  color: var(--nav-inactive);\n  font-weight: 400;\n}\n\n.nav-item:hover {\n  color: var(--nav-hover);\n}\n\n\/* ============================= *\/\n\/* ESTADO ACTIVO *\/\n\/* ============================= *\/\n\n.nav-item.active {\n  color: var(--nav-active);\n}\n\n.nav-item svg {\n  width: 20px;\n  height: 20px;\n  transition: all 0.3s ease;\n}\n\n.nav-item.active svg {\n  width: 24px;\n  height: 24px;\n  color: var(--nav-active);\n}\n\n.nav-item span {\n  font-size: 11px;\n  white-space: nowrap;\n  transition: all 0.3s ease;\n}\n\n.nav-item.active span {\n  font-size: 13px;\n  font-weight: 600;\n}\n<\/style>\n\n<nav class=\"bottom-nav\">\n  <div class=\"bottom-nav-container\">\n\n    <a href=\"https:\/\/www.tiritaito.com\/blog\/inicio-app\/\" class=\"nav-item\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"\/>\n        <path d=\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/>\n      <\/svg>\n      <span>Inicio<\/span>\n    <\/a>\n\n    <a href=\"https:\/\/www.tiritaito.com\/blog\/que-hacemos-app\/\" class=\"nav-item\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n        <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"\/>\n        <path d=\"M12 17h.01\"\/>\n      <\/svg>\n      <span>\u00bfQu\u00e9 hacemos?<\/span>\n    <\/a>\n\n    <a href=\"https:\/\/www.tiritaito.com\/blog\/novedades-app\/\" class=\"nav-item\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"\/>\n        <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"\/>\n      <\/svg>\n      <span>Novedades<\/span>\n    <\/a>\n<a href=\"https:\/\/www.tiritaito.com\/blog\/biblioteca-app\/\" class=\"nav-item\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"m16 6 4 14\"\/>\n        <path d=\"M12 6v14\"\/>\n        <path d=\"M8 8v12\"\/>\n        <path d=\"M4 4v16\"\/>\n      <\/svg>\n      <span>Biblioteca<\/span>\n    <\/a>\n\n    <a href=\"https:\/\/www.tiritaito.com\/blog\/buscar-app\/\" class=\"nav-item\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n        <path d=\"m21 21-4.3-4.3\"\/>\n      <\/svg>\n      <span>Buscar<\/span>\n    <\/a>\n\n  <\/div>\n<\/nav>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n\n  var currentPath = window.location.pathname;\n  var nav = document.querySelector('.bottom-nav');\n  var navItems = document.querySelectorAll('.nav-item');\n\n  \/* MARCAR ACTIVO *\/\n  navItems.forEach(function(item) {\n    var href = new URL(item.getAttribute('href')).pathname;\n    if (currentPath === href || currentPath.startsWith(href)) {\n      item.classList.add('active');\n    }\n  });\n\n  \/* EFECTO P\u00cdLDORA *\/\n  var PAGINAS_PILDORA = [\n    '\/blog\/inicio-app\/',\n  ];\n\n  if (PAGINAS_PILDORA.includes(currentPath)) {\n    nav.classList.add('pill-start');\n\n    setTimeout(function () {\n      nav.classList.remove('pill-start');\n      nav.classList.add('pill-open');\n    }, 400);\n  }\n\n});\n<\/script><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-14717","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/pages\/14717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/comments?post=14717"}],"version-history":[{"count":9,"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/pages\/14717\/revisions"}],"predecessor-version":[{"id":15231,"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/pages\/14717\/revisions\/15231"}],"wp:attachment":[{"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/media?parent=14717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}