{"id":14715,"date":"2026-01-15T15:01:23","date_gmt":"2026-01-15T15:01:23","guid":{"rendered":"https:\/\/www.tiritaito.com\/blog\/?page_id=14715"},"modified":"2026-01-30T13:05:07","modified_gmt":"2026-01-30T13:05:07","slug":"buscar-app","status":"publish","type":"page","link":"https:\/\/www.tiritaito.com\/blog\/buscar-app\/","title":{"rendered":"Buscar 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:49px;--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  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n\n  .search-page * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  .search-page {\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    background: #fafafa;\n    min-height: 100vh;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .search-header {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    background: rgba(250, 250, 250, 0.8);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border-bottom: 1px solid #e5e5e5;\n    padding: 24px 16px;\n  }\n\n  .search-header-inner {\n    max-width: 580px;\n    margin: 0 auto;\n  }\n\n  .search-title {\n    font-size: 28px;\n    font-weight: 600;\n    text-align: center;\n    color: #171717;\n    margin-bottom: 16px;\n  }\n\n  .search-input-wrapper {\n    position: relative;\n    width: 100%;\n  }\n\n  .search-icon {\n    position: absolute;\n    left: 16px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    color: #737373;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 12px 40px 12px 44px;\n    border-radius: 12px;\n    border: none;\n    background: #f5f5f5;\n    font-size: 16px;\n    font-family: inherit;\n    color: #171717;\n    outline: none;\n    transition: all 0.2s ease;\n  }\n\n  .search-input::placeholder {\n    color: #737373;\n  }\n\n  .search-input:focus {\n    box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.1);\n  }\n\n  .clear-btn {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: rgba(115, 115, 115, 0.3);\n    border: none;\n    cursor: pointer;\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .clear-btn.visible {\n    display: flex;\n  }\n\n  .clear-btn svg {\n    width: 12px;\n    height: 12px;\n    color: #fafafa;\n  }\n\n  .categories {\n    display: flex;\n    gap: 8px;\n    margin-top: 16px;\n    overflow-x: auto;\n    padding-bottom: 4px;\n  }\n\n  .categories::-webkit-scrollbar {\n    display: none;\n  }\n\n  .chip {\n    padding: 8px 16px;\n    border-radius: 50px;\n    font-size: 14px;\n    font-weight: 500;\n    background: #f5f5f5;\n    color: #737373;\n    border: none;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-family: inherit;\n  }\n\n  .chip:hover {\n    background: #ebebeb;\n  }\n\n  .chip.active {\n    background: #171717;\n    color: #fafafa;\n  }\n\n  .chip svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  .search-results {\n    max-width: 580px;\n    margin: 0 auto;\n    padding: 24px 16px;\n  }\n\n  .results-count {\n    font-size: 12px;\n    color: #737373;\n    margin-bottom: 16px;\n    padding-left: 4px;\n  }\n\n  .results-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .result-card {\n    background: #ffffff;\n    border-radius: 16px;\n    padding: 16px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  }\n\n  .result-card:active {\n    transform: scale(0.98);\n    opacity: 0.9;\n  }\n\n  .result-card-inner {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n  }\n\n  .result-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: #f5f5f5;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .result-icon svg {\n    width: 20px;\n    height: 20px;\n    color: #737373;\n  }\n\n  .result-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .result-category {\n    font-size: 11px;\n    color: #737373;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 2px;\n  }\n\n  .result-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: #171717;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .result-description {\n    font-size: 14px;\n    color: #737373;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .result-arrow {\n    flex-shrink: 0;\n  }\n.result-arrow svg {\n    width: 20px;\n    height: 20px;\n    color: rgba(115, 115, 115, 0.5);\n  }\n\n  .empty-state {\n    text-align: center;\n    padding: 80px 20px;\n  }\n\n  .empty-icon {\n    width: 64px;\n    height: 64px;\n    margin: 0 auto 16px;\n    border-radius: 50%;\n    background: #f5f5f5;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .empty-icon svg {\n    width: 28px;\n    height: 28px;\n    color: #737373;\n  }\n\n  .empty-text {\n    color: #737373;\n    font-size: 16px;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(8px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .animate-in {\n    animation: fadeIn 0.3s ease-out forwards;\n  }\n<\/style>\n\n<div class=\"search-page\">\n  <header class=\"search-header\">\n    <div class=\"search-header-inner\">\n      <h1 class=\"search-title\">Buscar<\/h1>\n      \n      <div class=\"search-input-wrapper\">\n        <svg class=\"search-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n          <path d=\"m21 21-4.3-4.3\"><\/path>\n        <\/svg>\n        <input type=\"text\" class=\"search-input\" id=\"searchInput\" placeholder=\"Buscar\">\n        <button class=\"clear-btn\" id=\"clearBtn\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M18 6 6 18M6 6l12 12\"><\/path>\n          <\/svg>\n        <\/button>\n      <\/div>\n\n      <div class=\"categories\" id=\"categories\">\n        <button class=\"chip active\" data-category=\"all\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z\"><\/path>\n          <\/svg>\n          Todo\n        <\/button>\n        <button class=\"chip\" data-category=\"songs\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M9 18V5l12-2v13\"><\/path>\n            <circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle>\n            <circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle>\n          <\/svg>\n          Canciones\n        <\/button>\n        <button class=\"chip\" data-category=\"videos\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"m22 8-6 4 6 4V8Z\"><\/path>\n            <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\"><\/rect>\n          <\/svg>\n          Videos\n        <\/button>\n        <button class=\"chip\" data-category=\"pages\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"><\/path>\n            <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n          <\/svg>\n          P\u00e1ginas\n        <\/button>\n        <button class=\"chip\" data-category=\"novenas\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"><\/path>\n          <\/svg>\n          Novenas\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <main class=\"search-results\" id=\"searchResults\">\n    <div class=\"empty-state animate-in\">\n      <div class=\"empty-icon\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n          <path d=\"m21 21-4.3-4.3\"><\/path>\n        <\/svg>\n      <\/div>\n      <p class=\"empty-text\">Busca contenido en nuestra web<\/p>\n    <\/div>\n  <\/main>\n<\/div>\n<script>\n(function() {\n  \/\/ Datos de ejemplo - PERSONALIZA ESTO CON TU CONTENIDO REAL\n  const data = [\n    { id: '1', title: 'Ave Mar\u00eda - Himno a la Virgen', description: 'Hermosa interpretaci\u00f3n del himno cl\u00e1sico dedicado a la Virgen Mar\u00eda', category: 'songs', duration: '4:32' },\n    { id: '2', title: 'Salmo 23 - El Se\u00f1or es mi Pastor', description: 'Versi\u00f3n musical del salmo m\u00e1s conocido', category: 'songs', duration: '3:45' },\n    { id: '3', title: 'Canto de Entrada - Domingo de Ramos', description: 'Canto procesional para la celebraci\u00f3n', category: 'songs', duration: '5:12' },\n    { id: '4', title: 'Misa de Domingo - Homil\u00eda Completa', description: 'Grabaci\u00f3n completa de la misa dominical', category: 'videos', duration: '45:00' },\n    { id: '5', title: 'Tutorial: C\u00f3mo rezar el Rosario', description: 'Gu\u00eda paso a paso para aprender a rezar el Santo Rosario', category: 'videos', duration: '15:30' },\n    { id: '6', title: 'Concierto de Navidad 2024', description: 'Grabaci\u00f3n del concierto navide\u00f1o con el coro', category: 'videos', duration: '1:20:00' },\n    { id: '7', title: 'Horarios de Misa', description: 'Consulta todos los horarios de misas diarias y dominicales', category: 'pages' },\n    { id: '8', title: 'Sacramentos - Informaci\u00f3n y Requisitos', description: 'Todo sobre bautismo, confirmaci\u00f3n, matrimonio', category: 'pages' },\n    { id: '9', title: 'Grupos Pastorales', description: 'Conoce los diferentes grupos de pastoral', category: 'pages' },\n    { id: '10', title: 'Contacto y Ubicaci\u00f3n', description: 'Direcci\u00f3n, tel\u00e9fono y mapa de ubicaci\u00f3n', category: 'pages' },\n    { id: '11', title: 'Novena a la Virgen de Guadalupe', description: 'Nueve d\u00edas de oraci\u00f3n y reflexi\u00f3n', category: 'novenas' },\n    { id: '12', title: 'Novena de Navidad', description: 'La tradicional novena de aguinaldos', category: 'novenas' },\n    { id: '13', title: 'Novena al Divino Ni\u00f1o Jes\u00fas', description: 'Novena de oraci\u00f3n al Divino Ni\u00f1o', category: 'novenas' },\n    { id: '14', title: 'Novena a San Jos\u00e9', description: 'Nueve d\u00edas dedicados al padre adoptivo de Jes\u00fas', category: 'novenas' }\n  ];\n\n  const categoryLabels = {\n    songs: 'Canci\u00f3n',\n    videos: 'Video', \n    pages: 'P\u00e1gina',\n    novenas: 'Novena'\n  };\n\n  const categoryIcons = {\n    songs: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18V5l12-2v13\"><\/path><circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle><circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle><\/svg>',\n    videos: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m22 8-6 4 6 4V8Z\"><\/path><rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\"><\/rect><\/svg>',\n    pages: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><\/svg>',\n    novenas: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"><\/path><\/svg>'\n  };\n\n  const searchInput = document.getElementById('searchInput');\n  const clearBtn = document.getElementById('clearBtn');\n  const categoriesContainer = document.getElementById('categories');\n  const resultsContainer = document.getElementById('searchResults');\n\n  let currentCategory = 'all';\n\n  function search() {\n    const query = searchInput.value.trim().toLowerCase();\n    clearBtn.classList.toggle('visible', query.length > 0);\n\n    if (!query) {\n      resultsContainer.innerHTML = `\n        <div class=\"empty-state animate-in\">\n          <div class=\"empty-icon\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n      <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n              <path d=\"m21 21-4.3-4.3\"><\/path>\n            <\/svg>\n          <\/div>\n          <p class=\"empty-text\">Busca contenido en nuestra web<\/p>\n        <\/div>\n      ;\n      return;\n    }\n\n    const terms = query.split(\/\\s+\/);\n    const results = data.filter(item => {\n      if (currentCategory !== 'all' && item.category !== currentCategory) return false;\n      const text = (item.title + ' ' + item.description).toLowerCase();\n      return terms.every(term => text.includes(term));\n    });\n\n    if (results.length === 0) {\n      resultsContainer.innerHTML = \n        <div class=\"empty-state animate-in\">\n          <p class=\"empty-text\">Sin resultados para \"${searchInput.value}\"<\/p>\n        <\/div>\n      ;\n      return;\n    }\n\n    resultsContainer.innerHTML = \n      <p class=\"results-count\">${results.length} resultado${results.length !== 1 ? 's' : ''}<\/p>\n      <div class=\"results-list animate-in\">\n        ${results.map(item => \n          <div class=\"result-card\">\n            <div class=\"result-card-inner\">\n              <div class=\"result-icon\">${categoryIcons[item.category]}<\/div>\n              <div class=\"result-content\">\n                <p class=\"result-category\">${categoryLabels[item.category]}${item.duration ? ' \u00b7 ' + item.duration : ''}<\/p>\n                <h3 class=\"result-title\">${item.title}<\/h3>\n                <p class=\"result-description\">${item.description}<\/p>\n              <\/div>\n              <div class=\"result-arrow\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"m9 18 6-6-6-6\"><\/path>\n                <\/svg>\n              <\/div>\n            <\/div>\n          <\/div>\n        ).join('')}\n      <\/div>\n    `;\n  }\n\n  searchInput.addEventListener('input', search);\n  \n  clearBtn.addEventListener('click', () => {\n    searchInput.value = '';\n    search();\n    searchInput.focus();\n  });\n\n  categoriesContainer.addEventListener('click', (e) => {\n    const chip = e.target.closest('.chip');\n    if (!chip) return;\n    \n    document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));\n    chip.classList.add('active');\n    currentCategory = chip.dataset.category;\n    search();\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-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-14715","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/pages\/14715","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=14715"}],"version-history":[{"count":15,"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/pages\/14715\/revisions"}],"predecessor-version":[{"id":15230,"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/pages\/14715\/revisions\/15230"}],"wp:attachment":[{"href":"https:\/\/www.tiritaito.com\/blog\/wp-json\/wp\/v2\/media?parent=14715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}