{"id":1235,"date":"2026-06-01T13:04:04","date_gmt":"2026-06-01T17:04:04","guid":{"rendered":"https:\/\/cuidadoresacademypr.com\/?page_id=1235"},"modified":"2026-06-01T13:26:45","modified_gmt":"2026-06-01T17:26:45","slug":"tutoriales","status":"publish","type":"page","link":"https:\/\/cuidadoresacademypr.com\/en\/tutoriales\/","title":{"rendered":"Tutorials"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1235\" class=\"elementor elementor-1235\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73382be e-flex e-con-boxed e-con e-parent\" data-id=\"73382be\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8714a16 elementor-widget elementor-widget-html\" data-id=\"8714a16\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"cap-biblioteca\">\r\n\r\n  <div class=\"cap-header\">\r\n    <h2 class=\"cap-titulo\">Biblioteca de Tutoriales<\/h2>\r\n    <p class=\"cap-subtitulo\">Aprende a tu ritmo. Contenido educativo para cuidadores y enfermeras.<\/p>\r\n  <\/div>\r\n\r\n  <!-- Buscador -->\r\n  <div class=\"cap-buscador\">\r\n    <svg class=\"cap-buscador-icono\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n      <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\r\n    <\/svg>\r\n    <input type=\"text\" id=\"capInputBuscar\" placeholder=\"Buscar tutorial...\" autocomplete=\"off\">\r\n  <\/div>\r\n\r\n  <!-- Filtros de categoria (se generan solos) -->\r\n  <div class=\"cap-filtros\" id=\"capFiltros\"><\/div>\r\n\r\n  <!-- Cuadricula de videos (se genera sola) -->\r\n  <div class=\"cap-grid\" id=\"capGrid\"><\/div>\r\n\r\n  <!-- Mensaje cuando no hay resultados -->\r\n  <p class=\"cap-vacio\" id=\"capVacio\" hidden>No encontramos tutoriales con ese criterio.<\/p>\r\n\r\n<\/div>\r\n\r\n<!-- Modal \/ reproductor -->\r\n<div class=\"cap-modal\" id=\"capModal\" hidden>\r\n  <div class=\"cap-modal-fondo\" data-cerrar><\/div>\r\n  <div class=\"cap-modal-caja\">\r\n    <button class=\"cap-modal-cerrar\" data-cerrar aria-label=\"Cerrar\">&times;<\/button>\r\n    <div class=\"cap-modal-video\">\r\n      <video id=\"capModalVideo\" controls controlsList=\"nodownload\" playsinline><\/video>\r\n    <\/div>\r\n    <div class=\"cap-modal-info\">\r\n      <h3 id=\"capModalTitulo\"><\/h3>\r\n      <p id=\"capModalDescripcion\"><\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* ====== Paleta y base (scoped a .cap-biblioteca para no chocar con el tema) ====== *\/\r\n.cap-biblioteca{\r\n  --cap-azul:#007ab5;        \/* color principal *\/\r\n  --cap-azul-osc:#005c88;\r\n  --cap-tinta:#1f2937;\r\n  --cap-gris:#6b7280;\r\n  --cap-borde:#e5e7eb;\r\n  --cap-fondo-tarjeta:#ffffff;\r\n  --cap-radio:16px;\r\n  --cap-sombra:0 6px 24px rgba(15,23,42,.08);\r\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  color:var(--cap-tinta);\r\n  max-width:1180px;margin:0 auto;padding:8px 16px 40px;box-sizing:border-box;\r\n}\r\n.cap-biblioteca *{box-sizing:border-box;}\r\n\r\n.cap-header{text-align:center;margin:8px 0 28px;}\r\n.cap-titulo{font-size:clamp(26px,4vw,38px);font-weight:800;margin:0 0 8px;letter-spacing:-.02em;}\r\n.cap-subtitulo{font-size:clamp(15px,2vw,18px);color:var(--cap-gris);margin:0;}\r\n\r\n\/* ====== Buscador ====== *\/\r\n.cap-buscador{position:relative;max-width:520px;margin:0 auto 22px;}\r\n.cap-buscador-icono{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--cap-gris);pointer-events:none;}\r\n.cap-buscador input{\r\n  width:100%;padding:14px 16px 14px 46px;border:1.5px solid var(--cap-borde);\r\n  border-radius:999px;font-size:16px;outline:none;transition:.2s;background:#fff;color:var(--cap-tinta);\r\n}\r\n.cap-buscador input:focus{border-color:var(--cap-azul);box-shadow:0 0 0 4px rgba(0,122,181,.12);}\r\n\r\n\/* ====== Filtros ====== *\/\r\n.cap-filtros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 30px;}\r\n.cap-chip{\r\n  border:1.5px solid var(--cap-borde);background:#fff;color:var(--cap-tinta);\r\n  padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;\r\n  transition:.18s;white-space:nowrap;\r\n}\r\n.cap-chip:hover{border-color:var(--cap-azul);color:var(--cap-azul);}\r\n.cap-chip.activo{background:var(--cap-azul);border-color:var(--cap-azul);color:#fff;box-shadow:0 4px 12px rgba(0,122,181,.28);}\r\n\r\n\/* ====== Grid de tarjetas ====== *\/\r\n.cap-grid{\r\n  display:grid;gap:24px;\r\n  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));\r\n}\r\n.cap-tarjeta{\r\n  background:var(--cap-fondo-tarjeta);border:1px solid var(--cap-borde);\r\n  border-radius:var(--cap-radio);overflow:hidden;cursor:pointer;\r\n  transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column;\r\n}\r\n.cap-tarjeta:hover{transform:translateY(-5px);box-shadow:var(--cap-sombra);}\r\n.cap-thumb{\r\n  position:relative;width:100%;aspect-ratio:16\/9;background:#005c88;overflow:hidden;\r\n}\r\n.cap-thumb img,.cap-thumb video{width:100%;height:100%;object-fit:cover;display:block;}\r\n.cap-play{\r\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\r\n  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));transition:.2s;\r\n}\r\n.cap-tarjeta:hover .cap-play{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45));}\r\n.cap-play span{\r\n  width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);\r\n  display:flex;align-items:center;justify-content:center;transition:.2s;box-shadow:0 4px 14px rgba(0,0,0,.25);\r\n}\r\n.cap-tarjeta:hover .cap-play span{transform:scale(1.08);background:#fff;}\r\n.cap-play span::after{content:\"\";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--cap-azul);margin-left:4px;}\r\n.cap-duracion{\r\n  position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.78);color:#fff;\r\n  font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px;\r\n}\r\n.cap-tarjeta-cuerpo{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;}\r\n.cap-tag{\r\n  align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;\r\n  color:var(--cap-azul);background:rgba(0,122,181,.1);padding:4px 10px;border-radius:999px;margin-bottom:2px;\r\n}\r\n.cap-tarjeta-titulo{font-size:17px;font-weight:700;margin:0;line-height:1.3;}\r\n.cap-tarjeta-desc{font-size:14px;color:var(--cap-gris);margin:0;line-height:1.5;}\r\n\r\n.cap-vacio{text-align:center;color:var(--cap-gris);font-size:16px;padding:40px 0;}\r\n\r\n\/* ====== Modal ====== *\/\r\n.cap-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;}\r\n.cap-modal[hidden]{display:none;}\r\n.cap-modal-fondo{position:absolute;inset:0;background:rgba(10,15,25,.82);backdrop-filter:blur(3px);}\r\n.cap-modal-caja{\r\n  position:relative;z-index:1;width:100%;max-width:880px;background:#000;border-radius:16px;\r\n  overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:capAparece .25s ease;\r\n}\r\n@keyframes capAparece{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\r\n.cap-modal-cerrar{\r\n  position:absolute;top:10px;right:14px;z-index:2;width:40px;height:40px;border:none;\r\n  background:rgba(0,0,0,.55);color:#fff;font-size:28px;line-height:1;border-radius:50%;cursor:pointer;transition:.2s;\r\n}\r\n.cap-modal-cerrar:hover{background:rgba(0,0,0,.85);transform:rotate(90deg);}\r\n.cap-modal-video{width:100%;aspect-ratio:16\/9;background:#000;}\r\n.cap-modal-video video{width:100%;height:100%;display:block;}\r\n.cap-modal-info{padding:18px 22px 22px;background:#fff;}\r\n.cap-modal-info h3{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--cap-tinta);font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;}\r\n.cap-modal-info p{margin:0;color:var(--cap-gris);font-size:15px;line-height:1.6;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;}\r\n\r\n@media(max-width:480px){\r\n  .cap-grid{grid-template-columns:1fr;}\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  \/* ===========================================================\r\n     1) CATEGORIAS  -> el orden aqui es el orden de los botones.\r\n        \"Todos\" se agrega automaticamente al inicio.\r\n     =========================================================== *\/\r\n  const CATEGORIAS = [\"Signos vitales\", \"Pruebas\", \"Se\u00f1ales de alerta\"];\r\n\r\n  \/* ===========================================================\r\n     2) VIDEOS  -> edita \/ duplica los bloques { ... }\r\n        Reemplaza las URL por las de TU biblioteca de WordPress.\r\n        (Medios > clic en el archivo > copia la \"URL del archivo\")\r\n     =========================================================== *\/\r\n  const VIDEOS = [\r\n    {\r\n      titulo:\"C\u00f3mo tomar la presi\u00f3n sangu\u00ednea\",\r\n      descripcion:\"Pasos para medir correctamente la presi\u00f3n arterial del paciente.\",\r\n      categoria:\"Signos vitales\",\r\n      url:\"https:\/\/cuidadoresacademypr.com\/wp-content\/uploads\/2026\/06\/Presion-sanguinea-WEB.mp4\",\r\n      poster:\"\",\r\n      duracion:\"3:13\"\r\n    },\r\n    {\r\n      titulo:\"Se\u00f1ales de pobre oxigenaci\u00f3n\",\r\n      descripcion:\"Reconoce los signos de baja oxigenaci\u00f3n y c\u00f3mo actuar a tiempo.\",\r\n      categoria:\"Signos vitales\",\r\n      url:\"https:\/\/cuidadoresacademypr.com\/wp-content\/uploads\/2026\/06\/pobre-oxigenacion-WEB.mp4\",\r\n      poster:\"\",\r\n      duracion:\"4:12\"\r\n    },\r\n    {\r\n      titulo:\"Prueba de az\u00facar (glucosa)\",\r\n      descripcion:\"C\u00f3mo realizar e interpretar la prueba de az\u00facar en sangre.\",\r\n      categoria:\"Pruebas\",\r\n      url:\"https:\/\/cuidadoresacademypr.com\/wp-content\/uploads\/2026\/06\/Prueba-azucar-WEB.mp4\",\r\n      poster:\"\",\r\n      duracion:\"7:34\"\r\n    },\r\n    {\r\n      titulo:\"Signos y se\u00f1ales de alerta\",\r\n      descripcion:\"Identifica las se\u00f1ales de alerta que requieren atenci\u00f3n inmediata.\",\r\n      categoria:\"Se\u00f1ales de alerta\",\r\n      url:\"https:\/\/cuidadoresacademypr.com\/wp-content\/uploads\/2026\/06\/Signos-alertas-WEB.mp4\",\r\n      poster:\"\",\r\n      duracion:\"8:03\"\r\n    }\r\n  ];\r\n\r\n  \/* ===========================================================\r\n     De aqui hacia abajo NO necesitas tocar nada.\r\n     =========================================================== *\/\r\n  const grid    = document.getElementById('capGrid');\r\n  const filtros = document.getElementById('capFiltros');\r\n  const input   = document.getElementById('capInputBuscar');\r\n  const vacio   = document.getElementById('capVacio');\r\n  const modal   = document.getElementById('capModal');\r\n  const mVideo  = document.getElementById('capModalVideo');\r\n  const mTitulo = document.getElementById('capModalTitulo');\r\n  const mDesc   = document.getElementById('capModalDescripcion');\r\n\r\n  let categoriaActiva = \"Todos\";\r\n\r\n  \/\/ --- Botones de categoria ---\r\n  [\"Todos\", ...CATEGORIAS].forEach(cat=>{\r\n    const b=document.createElement('button');\r\n    b.className='cap-chip'+(cat===\"Todos\"?' activo':'');\r\n    b.textContent=cat;\r\n    b.addEventListener('click',()=>{\r\n      categoriaActiva=cat;\r\n      filtros.querySelectorAll('.cap-chip').forEach(c=>c.classList.remove('activo'));\r\n      b.classList.add('activo');\r\n      render();\r\n    });\r\n    filtros.appendChild(b);\r\n  });\r\n\r\n  \/\/ --- Crea una tarjeta ---\r\n  function tarjeta(v){\r\n    const card=document.createElement('div');\r\n    card.className='cap-tarjeta';\r\n\r\n    const media = v.poster\r\n      ? '<img decoding=\"async\" src=\"'+v.poster+'\" alt=\"'+v.titulo+'\" loading=\"lazy\">'\r\n      : '<video src=\"'+v.url+'#t=15\" preload=\"metadata\" muted playsinline><\/video>';\r\n\r\n    card.innerHTML =\r\n      '<div class=\"cap-thumb\">'+media+\r\n        '<div class=\"cap-play\"><span><\/span><\/div>'+\r\n        (v.duracion?'<div class=\"cap-duracion\">'+v.duracion+'<\/div>':'')+\r\n      '<\/div>'+\r\n      '<div class=\"cap-tarjeta-cuerpo\">'+\r\n        '<span class=\"cap-tag\">'+v.categoria+'<\/span>'+\r\n        '<h3 class=\"cap-tarjeta-titulo\">'+v.titulo+'<\/h3>'+\r\n        '<p class=\"cap-tarjeta-desc\">'+v.descripcion+'<\/p>'+\r\n      '<\/div>';\r\n\r\n    card.addEventListener('click',()=>abrir(v));\r\n    return card;\r\n  }\r\n\r\n  \/\/ --- Dibuja la cuadricula segun filtro + busqueda ---\r\n  function render(){\r\n    const q=(input.value||'').toLowerCase().trim();\r\n    grid.innerHTML='';\r\n    const lista=VIDEOS.filter(v=>{\r\n      const okCat = categoriaActiva===\"Todos\" || v.categoria===categoriaActiva;\r\n      const okBus = !q || (v.titulo+' '+v.descripcion+' '+v.categoria).toLowerCase().includes(q);\r\n      return okCat && okBus;\r\n    });\r\n    lista.forEach(v=>grid.appendChild(tarjeta(v)));\r\n    vacio.hidden = lista.length>0;\r\n  }\r\n\r\n  \/\/ --- Modal ---\r\n  function abrir(v){\r\n    mVideo.src=v.url;\r\n    mTitulo.textContent=v.titulo;\r\n    mDesc.textContent=v.descripcion;\r\n    modal.hidden=false;\r\n    document.body.style.overflow='hidden';\r\n    mVideo.play().catch(()=>{});\r\n  }\r\n  function cerrar(){\r\n    modal.hidden=true;\r\n    mVideo.pause();\r\n    mVideo.removeAttribute('src');\r\n    mVideo.load();\r\n    document.body.style.overflow='';\r\n  }\r\n  modal.querySelectorAll('[data-cerrar]').forEach(el=>el.addEventListener('click',cerrar));\r\n  document.addEventListener('keydown',e=>{ if(e.key==='Escape'&&!modal.hidden) cerrar(); });\r\n\r\n  input.addEventListener('input',render);\r\n  render();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Biblioteca de Tutoriales Aprende a tu ritmo. Contenido educativo para cuidadores y enfermeras. No encontramos tutoriales con ese<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/tpl-fluid.php","meta":{"_tutorstarter_page_metadata":[],"footnotes":""},"class_list":["post-1235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuidadoresacademypr.com\/en\/wp-json\/wp\/v2\/pages\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuidadoresacademypr.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuidadoresacademypr.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cuidadoresacademypr.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuidadoresacademypr.com\/en\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":13,"href":"https:\/\/cuidadoresacademypr.com\/en\/wp-json\/wp\/v2\/pages\/1235\/revisions"}],"predecessor-version":[{"id":1252,"href":"https:\/\/cuidadoresacademypr.com\/en\/wp-json\/wp\/v2\/pages\/1235\/revisions\/1252"}],"wp:attachment":[{"href":"https:\/\/cuidadoresacademypr.com\/en\/wp-json\/wp\/v2\/media?parent=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}