{"id":3936,"date":"2026-01-15T20:14:31","date_gmt":"2026-01-16T02:14:31","guid":{"rendered":"https:\/\/tecsify.com\/blog\/?page_id=3936"},"modified":"2026-01-21T14:38:10","modified_gmt":"2026-01-21T20:38:10","slug":"microlearning","status":"publish","type":"page","link":"https:\/\/tecsify.com\/blog\/microlearning\/","title":{"rendered":"Microlearning en Tecnolog\u00eda y Programaci\u00f3n"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3936\" class=\"elementor elementor-3936\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4c40f0f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4c40f0f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c3159c7\" data-id=\"c3159c7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b3209c5 elementor-widget elementor-widget-html\" data-id=\"b3209c5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  :root{\r\n    --tcs-blue:#030399;\r\n    --tcs-blue-2:#0b0bb8;\r\n\r\n    --tcs-ink:#121635;\r\n    --tcs-ink-2:#5c6280;\r\n    --tcs-mute:#7a80a0;\r\n\r\n    --tcs-bg:#f7f8fc;\r\n    --tcs-card:#ffffff;\r\n\r\n    --tcs-line:rgba(3,3,153,.10);\r\n    --tcs-line-2:rgba(18,22,53,.10);\r\n\r\n    --elev-0: 0 1px 0 rgba(18,22,53,.04);\r\n    --elev-1: 0 10px 24px rgba(3,3,153,.07);\r\n    --elev-2: 0 18px 44px rgba(3,3,153,.11);\r\n    --elev-3: 0 26px 70px rgba(3,3,153,.14);\r\n\r\n    --r-12:12px;\r\n    --r-16:16px;\r\n    --r-20:20px;\r\n    --r-24:24px;\r\n\r\n    --ease-out:cubic-bezier(.18,.9,.2,1);\r\n    --ease-soft:cubic-bezier(.22,.8,.2,1);\r\n\r\n    --max:1160px;\r\n    --pad:clamp(18px,2.2vw,28px);\r\n    --ring:0 0 0 4px rgba(3,3,153,.14);\r\n\r\n\r\n  }\r\n\r\n  \/* Reset scoped *\/\r\n  .tcs-portal, .tcs-portal *{ box-sizing:border-box; }\r\n\r\n  \/* Canvas *\/\r\n  .site-wrap{\r\n    background:\r\n      radial-gradient(1200px 500px at 50% -10%, rgba(3,3,153,.08), transparent 60%),\r\n      radial-gradient(900px 420px at 12% 30%, rgba(11,11,184,.06), transparent 55%),\r\n      var(--tcs-bg);\r\n    padding:10px\r\n  }\r\n  .tcs-wrap{\r\n    width:min(var(--max), calc(100% - (var(--pad) * 2)));\r\n    margin:0 auto;\r\n  }\r\n\r\n  .tcs-hero{\r\n    position:relative;\r\n    padding: clamp(22px,3vw,34px);\r\n    border-radius: var(--r-24);\r\n    background:\r\n      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));\r\n    border: 1px solid rgba(3,3,153,.08);\r\n    box-shadow: var(--elev-1);\r\n    overflow:hidden;\r\n    backdrop-filter: blur(10px);\r\n  }\r\n  .tcs-hero::before{\r\n    content:\"\";\r\n    position:absolute; inset:-2px;\r\n    background:\r\n      radial-gradient(14px 14px at 18% 22%, rgba(3,3,153,.085), transparent 60%),\r\n      radial-gradient(10px 10px at 72% 34%, rgba(3,3,153,.065), transparent 65%),\r\n      radial-gradient(12px 12px at 44% 76%, rgba(11,11,184,.055), transparent 60%),\r\n      linear-gradient(90deg, rgba(3,3,153,.04), transparent 40%, rgba(3,3,153,.02));\r\n    opacity:.52;\r\n    pointer-events:none;\r\n  }\r\n  .tcs-hero__grid{\r\n    position:relative;\r\n    display:grid;\r\n    grid-template-columns: 1.7fr .6fr;\r\n    gap: clamp(16px,2.2vw,26px);\r\n    align-items:center;\r\n  }\r\n\r\n  .tcs-kicker{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    padding:8px 12px;\r\n    border-radius:999px;\r\n    border:1px solid rgba(3,3,153,.12);\r\n    background: rgba(255,255,255,.74);\r\n    color: var(--tcs-ink-2);\r\n    font-size:13px;\r\n    letter-spacing:.01em;\r\n    width:fit-content;\r\n  }\r\n  .tcs-kicker__dot{\r\n    width:8px; height:8px; border-radius:99px;\r\n    background: var(--tcs-blue);\r\n    box-shadow: 0 0 0 6px rgba(3,3,153,.10);\r\n  }\r\n  .tcs-hero h1{\r\n    margin:12px 0 10px;\r\n    font-size: clamp(26px,3.4vw,44px);\r\n    line-height:1.08;\r\n    letter-spacing:-0.03em;\r\n    color: var(--tcs-ink);\r\n  }\r\n  .tcs-hero p{\r\n    margin:0;\r\n    max-width: 62ch;\r\n    font-size: clamp(15px,1.35vw,17px);\r\n    line-height:1.7;\r\n    color: var(--tcs-ink-2);\r\n  }\r\n\r\n  .tcs-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }\r\n  .tcs-chip{\r\n    display:inline-flex; align-items:center; gap:10px;\r\n    padding:10px 12px;\r\n    border-radius:999px;\r\n    background: rgba(255,255,255,.82);\r\n    border:1px solid rgba(3,3,153,.12);\r\n    box-shadow: 0 8px 18px rgba(3,3,153,.06);\r\n    color: var(--tcs-ink);\r\n    font-size:13px;\r\n    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);\r\n  }\r\n  .tcs-chip svg{ width:18px; height:18px; color: var(--tcs-blue); opacity:.95; }\r\n  .tcs-chip:hover{\r\n    transform: translateY(-2px);\r\n    border-color: rgba(3,3,153,.20);\r\n    box-shadow: 0 14px 30px rgba(3,3,153,.10);\r\n  }\r\n\r\n  .tcs-signal{\r\n    position:relative;\r\n    border-radius: var(--r-20);\r\n    background:\r\n      linear-gradient(180deg, rgba(3,3,153,.045), rgba(255,255,255,.70));\r\n    border: 1px solid rgba(3,3,153,.10);\r\n    box-shadow: 0 12px 28px rgba(3,3,153,.07);\r\n    padding:16px 16px 14px;\r\n    overflow:hidden;\r\n  }\r\n  .tcs-signal::after{\r\n    content:\"\";\r\n    position:absolute; inset:-2px;\r\n    background:\r\n      conic-gradient(from var(--tcs-spin, 0deg),\r\n        rgba(3,3,153,0.00),\r\n        rgba(3,3,153,0.20),\r\n        rgba(11,11,184,0.10),\r\n        rgba(3,3,153,0.00));\r\n    opacity:.62;\r\n    filter: blur(14px);\r\n    pointer-events:none;\r\n    mix-blend-mode:multiply;\r\n  }\r\n  .tcs-signal__title{ position:relative; margin:0 0 10px; font-size:13px; color: var(--tcs-ink-2); }\r\n  .tcs-signal__metric{ position:relative; display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }\r\n  .tcs-signal__big{ font-size:26px; font-weight:820; letter-spacing:-0.03em; color: var(--tcs-blue); }\r\n  .tcs-signal__small{ font-size:13px; color: var(--tcs-mute); }\r\n  .tcs-signal__row{ position:relative; display:flex; justify-content:space-between; gap:10px; font-size:13px; color: var(--tcs-ink-2); }\r\n  .tcs-signal__row strong{ color: var(--tcs-ink); font-weight:680; }\r\n\r\n  \/* =========================\r\n     SECTIONS \u2014 m\u00e1s premium + \u201crim\u201d sutil\r\n  ========================== *\/\r\n  .tcs-section{\r\n    margin-top: clamp(18px,2.2vw,26px);\r\n    padding: clamp(16px,2.2vw,22px);\r\n    border-radius: var(--r-24);\r\n    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));\r\n    border: 1px solid rgba(3,3,153,.08);\r\n    box-shadow: var(--elev-1);\r\n    backdrop-filter: blur(8px);\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* Conic rim muy sutil (integrado) *\/\r\n  .tcs-section::before{\r\n    content:\"\";\r\n    position:absolute; inset:-2px;\r\n    border-radius: inherit;\r\n    background:\r\n      conic-gradient(from var(--tcs-spin, 0deg),\r\n        rgba(3,3,153,0.00),\r\n        rgba(3,3,153,.18),\r\n        rgba(11,11,184,.08),\r\n        rgba(3,3,153,0.00));\r\n    opacity:.28;\r\n    filter: blur(16px);\r\n    pointer-events:none;\r\n  }\r\n\r\n  .tcs-section__head{\r\n    position: relative;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:flex-end;\r\n    gap:16px;\r\n    margin-bottom:14px;\r\n    z-index: 1;\r\n  }\r\n  .tcs-section__title{\r\n    font-size:16px;\r\n    font-weight:820;\r\n    letter-spacing:-0.02em;\r\n    margin:0 0 6px;\r\n    color: var(--tcs-ink);\r\n  }\r\n  .tcs-section__desc{\r\n    margin:0;\r\n    font-size:14px;\r\n    line-height:1.65;\r\n    color: var(--tcs-ink-2);\r\n    max-width:70ch;\r\n  }\r\n\r\n  .tcs-actions{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    flex-shrink:0;\r\n  }\r\n\r\n\r\n  .tcs-link{\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    padding:10px 12px;\r\n    border-radius: 14px;\r\n    text-decoration:none;\r\n    color: var(--tcs-blue);\r\n    border: 1px solid rgba(3,3,153,.14);\r\n    background: rgba(255,255,255,.78);\r\n    font-weight:780;\r\n    font-size:13px;\r\n    box-shadow: 0 10px 22px rgba(3,3,153,.06);\r\n    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);\r\n  }\r\n  .tcs-link svg{ width:16px; height:16px; }\r\n  .tcs-link:hover{\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 18px 42px rgba(3,3,153,.10);\r\n    border-color: rgba(3,3,153,.24);\r\n  }\r\n  .tcs-link:focus-visible{\r\n    outline:none;\r\n    box-shadow: 0 18px 42px rgba(3,3,153,.10), var(--ring);\r\n  }\r\n\r\n  .tcs-controls{\r\n    display:flex;\r\n    gap:8px;\r\n    align-items:center;\r\n    padding:6px;\r\n    border-radius:999px;\r\n    border:1px solid rgba(3,3,153,.12);\r\n    background: rgba(255,255,255,.78);\r\n    box-shadow: 0 12px 26px rgba(3,3,153,.06);\r\n    backdrop-filter: blur(10px);\r\n  }\r\n  .tcs-btn{\r\n    width:38px; height:38px;\r\n    border-radius:999px;\r\n    border:1px solid rgba(3,3,153,.12);\r\n    background: rgba(247,248,252,.92);\r\n    color: var(--tcs-blue);\r\n    display:grid; place-items:center;\r\n    cursor:pointer;\r\n    transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background .28s var(--ease-out), opacity .28s var(--ease-out);\r\n  }\r\n  .tcs-btn svg{ width:18px; height:18px; }\r\n  .tcs-btn:hover:not([disabled]){\r\n    transform: translateY(-2px);\r\n    background: rgba(3,3,153,.07);\r\n    box-shadow: 0 14px 30px rgba(3,3,153,.10);\r\n  }\r\n  .tcs-btn:active:not([disabled]){ transform: translateY(-1px); }\r\n  .tcs-btn[disabled]{ opacity:.42; cursor:not-allowed; }\r\n\r\n  .tcs-progress{\r\n    width: 104px;                 \/* un poco m\u00e1s largo = mejor lectura *\/\r\n    height: 6px;\r\n    border-radius:999px;\r\n    background: rgba(18,22,53,.08);\r\n    overflow:hidden;\r\n    position:relative;\r\n  }\r\n  .tcs-progress > i{\r\n    position:absolute;\r\n    left:0; top:0; height:100%;\r\n    border-radius:999px;\r\n    background: linear-gradient(90deg, rgba(3,3,153,.30), rgba(3,3,153,.98));\r\n    transform: translateX(0px);\r\n    transition: transform .45s var(--ease-soft), width .45s var(--ease-soft);\r\n    will-change: transform, width;\r\n\r\n    \/* CLAVE: aunque el JS calcule muy ancho, aqu\u00ed lo capamos *\/\r\n    min-width: 18px;\r\n    max-width: 44px;\r\n  }\r\n\r\n  \/* =========================\r\n     CAROUSEL\r\n  ========================== *\/\r\n  .tcs-carousel{\r\n    position:relative;\r\n    border-radius: var(--r-20);\r\n    overflow: clip;\r\n    z-index: 1;\r\n  }\r\n\r\n  .tcs-carousel::before,\r\n  .tcs-carousel::after{\r\n    content:\"\";\r\n    position:absolute; top:0; bottom:0;\r\n    width:52px;\r\n    pointer-events:none;\r\n    z-index:3;\r\n  }\r\n  .tcs-carousel::before{\r\n    left:0;\r\n    background: linear-gradient(90deg, rgba(247,248,252,1), rgba(247,248,252,0));\r\n  }\r\n  .tcs-carousel::after{\r\n    right:0;\r\n    background: linear-gradient(270deg, rgba(247,248,252,1), rgba(247,248,252,0));\r\n  }\r\n\r\n  .tcs-track{\r\n    display:flex;\r\n    align-items: stretch;\r\n    gap:14px;\r\n    overflow-x:auto;\r\n    padding: 10px 10px 12px; \/* un poco m\u00e1s \u201cair\u201d *\/\r\n    scroll-snap-type:x mandatory;\r\n    scroll-behavior:smooth;\r\n    -webkit-overflow-scrolling:touch;\r\n    scrollbar-width:none;\r\n    overscroll-behavior-x:contain;\r\n    user-select:none;\r\n    touch-action:pan-x;\r\n    content-visibility:auto;\r\n    contain-intrinsic-size: 340px;\r\n  }\r\n  .tcs-track::-webkit-scrollbar{ display:none; }\r\n\r\n  \/* =========================\r\n     CARDS \u2014 patr\u00f3n \u00fanico \/ premium rim \u201ccrisp\u201d\r\n  ========================== *\/\r\n  .tcs-card{\r\n    position:relative;\r\n    flex: 0 0 clamp(260px, 32vw, 360px);\r\n    scroll-snap-align:start;\r\n    text-decoration:none;\r\n    color:inherit;\r\n    display:block;\r\n\r\n    \/* fuerza coherencia visual en alto *\/\r\n    height: auto;\r\n    min-height: 410px;\r\n  }\r\n\r\n  \/* Rim con m\u00e1scara (m\u00e1s limpio que el padding-fake) *\/\r\n  .tcs-card__rim{\r\n    position:absolute; inset:0;\r\n    border-radius: var(--r-20);\r\n    background:\r\n      conic-gradient(from var(--tcs-spin, 0deg),\r\n        rgba(3,3,153,0.00),\r\n        rgba(3,3,153,0.30),\r\n        rgba(11,11,184,0.12),\r\n        rgba(3,3,153,0.00));\r\n    opacity:.85;\r\n    filter:saturate(1.05);\r\n\r\n    \/* m\u00e1scara: solo borde *\/\r\n    -webkit-mask:\r\n      linear-gradient(#000 0 0) content-box,\r\n      linear-gradient(#000 0 0);\r\n    -webkit-mask-composite: xor;\r\n    mask-composite: exclude;\r\n    padding: 2px;\r\n\r\n    transition: opacity .45s var(--ease-out), filter .45s var(--ease-out);\r\n    pointer-events:none;\r\n  }\r\n\r\n  .tcs-card__body{\r\n    height:100%;\r\n    border-radius: calc(var(--r-20) - 2px);\r\n    background:\r\n      linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,255,.94));\r\n    border:1px solid rgba(18,22,53,.07);\r\n    box-shadow: var(--elev-1);\r\n    overflow:hidden;\r\n    display:flex; flex-direction:column;\r\n    transform: translateZ(0);\r\n    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);\r\n  }\r\n\r\n  .tcs-card__media{\r\n    position:relative;\r\n    aspect-ratio: 1\/1;\r\n    overflow:hidden;\r\n    background: linear-gradient(135deg, rgba(247,248,252,1), rgba(232,234,246,1));\r\n    border-bottom: 1px solid rgba(18,22,53,.06);\r\n  }\r\n  .tcs-card__media img{\r\n    width:100%; height:100%;\r\n    object-fit:cover; \/* Infograf\u00edas *\/\r\n    display:block;\r\n    transform: scale(1.02);\r\n    filter: saturate(1.02) contrast(1.02);\r\n    transition: transform .75s var(--ease-out), filter .75s var(--ease-out);\r\n  }\r\n  .tcs-card__media::after{\r\n    content:\"\";\r\n    position:absolute; inset:0;\r\n    background:\r\n      radial-gradient(120% 90% at 18% 0%, rgba(3,3,153,.12), transparent 56%),\r\n      linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.18));\r\n    opacity:.55;\r\n    pointer-events:none;\r\n  }\r\n\r\n  \/* En \u201cC\u00f3digos\u201d la captura mostraba recorte\/white top: aqu\u00ed lo corregimos *\/\r\n  #tcs-carousel-codigos .tcs-card__media{\r\n    background: linear-gradient(135deg, rgba(3,3,153,.92), rgba(2,2,102,.92));\r\n  }\r\n  #tcs-carousel-codigos .tcs-card__media img{\r\n    object-fit: cover;\r\n    padding: 1px;\r\n    transform: none;\r\n    filter: saturate(1.02) contrast(1.02);\r\n  }\r\n  #tcs-carousel-codigos .tcs-card__media::after{\r\n    opacity:.35;\r\n    background:\r\n      radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.18), transparent 56%),\r\n      linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12));\r\n  }\r\n\r\n  .tcs-card__content{\r\n    padding: 14px 14px 16px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap: 8px;\r\n    flex: 1;\r\n    min-height: 0;\r\n  }\r\n\r\n  .tcs-pill{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:8px;\r\n    padding:7px 10px;\r\n    border-radius:999px;\r\n    border:1px solid rgba(3,3,153,.14);\r\n    background: rgba(3,3,153,.05);\r\n    color: var(--tcs-blue);\r\n    font-size:11px;\r\n    letter-spacing:.08em;\r\n    text-transform:uppercase;\r\n    font-weight:820;\r\n    width: fit-content;\r\n  }\r\n  .tcs-pill i{\r\n    width:8px; height:8px; border-radius:99px;\r\n    background: var(--tcs-blue);\r\n    box-shadow: 0 0 0 6px rgba(3,3,153,.10);\r\n    display:inline-block;\r\n  }\r\n\r\n  .tcs-card__title{\r\n    margin:0;\r\n    font-size:15px;\r\n    line-height:1.35;\r\n    letter-spacing:-0.02em;\r\n    color: var(--tcs-ink);\r\n    font-weight:820;\r\n\r\n    display:-webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n    overflow:hidden;\r\n  }\r\n\r\n  .tcs-card__meta{\r\n    margin:0;\r\n    font-size:13px;\r\n    line-height:1.6;\r\n    color: var(--tcs-ink-2);\r\n\r\n    display:-webkit-box;\r\n    -webkit-line-clamp: 3;\r\n    -webkit-box-orient: vertical;\r\n    overflow:hidden;\r\n  }\r\n\r\n  .tcs-card__footer{\r\n    margin-top:auto;\r\n    padding-top:12px;\r\n    border-top:1px solid rgba(18,22,53,.06);\r\n    display:flex; align-items:center; justify-content:space-between;\r\n    color: var(--tcs-mute);\r\n    font-size:12px;\r\n    gap: 10px;\r\n  }\r\n  .tcs-card__footer > span:first-child{\r\n    white-space:nowrap;\r\n    overflow:hidden;\r\n    text-overflow:ellipsis;\r\n    max-width: 62%;\r\n  }\r\n  .tcs-card__hint{\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    color: var(--tcs-blue);\r\n    font-weight:780;\r\n    white-space:nowrap;\r\n  }\r\n  .tcs-card__hint svg{ width:16px; height:16px; }\r\n\r\n  \/* Micro: shimmer m\u00e1s fino + lift menos agresivo *\/\r\n  .tcs-card__body::before{\r\n    content:\"\";\r\n    position:absolute; inset:-42%;\r\n    background: linear-gradient(115deg,\r\n      rgba(255,255,255,0) 38%,\r\n      rgba(255,255,255,.40) 48%,\r\n      rgba(255,255,255,0) 58%);\r\n    transform: translateX(-46%);\r\n    opacity:0;\r\n    pointer-events:none;\r\n  }\r\n\r\n  .tcs-card:hover .tcs-card__body{\r\n    transform: translateY(-4px);\r\n    border-color: rgba(3,3,153,.14);\r\n    box-shadow: var(--elev-2);\r\n  }\r\n  .tcs-card:hover .tcs-card__media img{\r\n    transform: scale(1.05);\r\n    filter: saturate(1.05) contrast(1.03);\r\n  }\r\n  #tcs-carousel-codigos .tcs-card:hover .tcs-card__media img{\r\n    transform: none; \/* contain no zoom *\/\r\n  }\r\n\r\n  .tcs-card:hover .tcs-card__rim{\r\n    opacity:1;\r\n    filter:saturate(1.18);\r\n  }\r\n  .tcs-card:hover .tcs-card__body::before{\r\n    opacity:.45;\r\n    animation: tcs-shimmer 2.6s var(--ease-soft) infinite;\r\n  }\r\n  @keyframes tcs-shimmer{\r\n    0%{ transform: translateX(-46%); }\r\n    55%{ transform: translateX(22%); }\r\n    100%{ transform: translateX(56%); }\r\n  }\r\n\r\n  .tcs-card:focus-visible{ outline:none; }\r\n  .tcs-card:focus-visible .tcs-card__body{\r\n    box-shadow: var(--elev-2), var(--ring);\r\n  }\r\n\r\n  \/* =========================\r\n     SKELETON \u2014 m\u00e1s \u201crefinado\u201d\r\n  ========================== *\/\r\n  .tcs-skel{\r\n    flex: 0 0 clamp(260px, 32vw, 360px);\r\n    min-height: 410px;\r\n    border-radius: var(--r-20);\r\n    border:1px solid rgba(18,22,53,.07);\r\n    background: rgba(255,255,255,.92);\r\n    box-shadow: var(--elev-1);\r\n    overflow:hidden;\r\n    display:flex;\r\n    flex-direction:column;\r\n  }\r\n  .tcs-skel__media{\r\n    aspect-ratio: 16\/10;\r\n    background: linear-gradient(135deg, rgba(247,248,252,1), rgba(232,234,246,1));\r\n    border-bottom: 1px solid rgba(18,22,53,.06);\r\n    position:relative;\r\n    overflow:hidden;\r\n  }\r\n  #tcs-carousel-codigos .tcs-skel__media{\r\n    background: linear-gradient(135deg, rgba(3,3,153,.92), rgba(2,2,102,.92));\r\n  }\r\n  .tcs-skel__body{\r\n    padding: 14px 14px 16px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:10px;\r\n    flex:1;\r\n  }\r\n  .tcs-skel__line{\r\n    height: 10px;\r\n    border-radius:999px;\r\n    background: rgba(18,22,53,.08);\r\n    overflow:hidden;\r\n    position:relative;\r\n  }\r\n  #tcs-carousel-codigos .tcs-skel__line{\r\n    background: rgba(255,255,255,.10);\r\n  }\r\n\r\n  .tcs-skel__line.w-40{ width:40%; }\r\n  .tcs-skel__line.w-65{ width:65%; }\r\n  .tcs-skel__line.w-85{ width:85%; }\r\n  .tcs-skel__line.w-55{ width:55%; }\r\n\r\n  .tcs-skel__line::after,\r\n  .tcs-skel__media::after{\r\n    content:\"\";\r\n    position:absolute; inset:-42%;\r\n    background: linear-gradient(115deg,\r\n      rgba(255,255,255,0) 38%,\r\n      rgba(255,255,255,.38) 48%,\r\n      rgba(255,255,255,0) 58%);\r\n    transform: translateX(-46%);\r\n    opacity:.55;\r\n    pointer-events:none;\r\n    animation: tcs-skel 1.95s var(--ease-soft) infinite;\r\n  }\r\n  @keyframes tcs-skel{\r\n    0%{ transform: translateX(-46%); }\r\n    100%{ transform: translateX(56%); }\r\n  }\r\n\r\n  \/* =========================\r\n     Editorial close (ligeramente m\u00e1s limpio)\r\n  ========================== *\/\r\n  .tcs-close{\r\n    margin-top: clamp(18px,2.2vw,26px);\r\n    border-radius: var(--r-24);\r\n    padding: clamp(18px,3vw,28px);\r\n    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));\r\n    border: 1px solid rgba(3,3,153,.08);\r\n    box-shadow: var(--elev-1);\r\n    overflow:hidden;\r\n    position:relative;\r\n  }\r\n  .tcs-close::after{\r\n    content:\"\";\r\n    position:absolute; inset:-2px;\r\n    background:\r\n      conic-gradient(from var(--tcs-spin, 0deg),\r\n        rgba(3,3,153,.00),\r\n        rgba(3,3,153,.14),\r\n        rgba(11,11,184,.06),\r\n        rgba(3,3,153,.00));\r\n    opacity:.50;\r\n    filter: blur(18px);\r\n    pointer-events:none;\r\n  }\r\n  .tcs-close__grid{\r\n    position:relative;\r\n    display:grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap:14px;\r\n    align-items:start;\r\n  }\r\n  .tcs-close h2{\r\n    margin:0 0 8px;\r\n    font-size:18px;\r\n    font-weight:860;\r\n    letter-spacing:-0.02em;\r\n  }\r\n  .tcs-close p{\r\n    margin:0;\r\n    color: var(--tcs-ink-2);\r\n    line-height:1.7;\r\n    font-size:14px;\r\n    max-width:70ch;\r\n  }\r\n  .tcs-steps{\r\n    display:grid;\r\n    grid-template-columns: repeat(3,1fr);\r\n    gap:10px;\r\n  }\r\n  .tcs-step{\r\n    border-radius:18px;\r\n    padding:14px 14px 12px;\r\n    border:1px solid rgba(18,22,53,.08);\r\n    background: rgba(255,255,255,.82);\r\n    box-shadow: 0 12px 26px rgba(3,3,153,.06);\r\n    position:relative;\r\n    overflow:hidden;\r\n  }\r\n  .tcs-step::before{\r\n    content:\"\";\r\n    position:absolute; inset:-2px;\r\n    background: radial-gradient(70% 60% at 20% 10%, rgba(3,3,153,.10), transparent 55%);\r\n    opacity:.50;\r\n    pointer-events:none;\r\n  }\r\n  .tcs-step__k{\r\n    position:relative;\r\n    display:flex; align-items:center; gap:10px;\r\n    color: var(--tcs-blue);\r\n    font-weight:860;\r\n    margin-bottom:8px;\r\n  }\r\n  .tcs-step__n{\r\n    width:28px; height:28px;\r\n    display:grid; place-items:center;\r\n    border-radius:999px;\r\n    border:1px solid rgba(3,3,153,.18);\r\n    background: rgba(3,3,153,.06);\r\n    font-size:12px;\r\n  }\r\n  .tcs-step__t{\r\n    position:relative;\r\n    margin:0 0 6px;\r\n    font-size:13px;\r\n    color: var(--tcs-ink);\r\n    font-weight:820;\r\n  }\r\n  .tcs-step__d{\r\n    position:relative;\r\n    margin:0;\r\n    font-size:13px;\r\n    color: var(--tcs-ink-2);\r\n    line-height:1.6;\r\n  }\r\n\r\n  \/* =========================\r\n     Motion policy\r\n  ========================== *\/\r\n  @media (prefers-reduced-motion: reduce){\r\n    .tcs-track{ scroll-behavior:auto; }\r\n    .tcs-card, .tcs-card *{ transition:none !important; }\r\n    .tcs-card__body::before{ animation:none !important; }\r\n    .tcs-skel__line::after, .tcs-skel__media::after{ animation:none !important; opacity:.20 !important; }\r\n    .tcs-portal *{ animation:none !important; }\r\n  }\r\n\r\n  \/* =========================\r\n     Responsive\r\n  ========================== *\/\r\n  @media (max-width: 980px){\r\n    .tcs-hero__grid{ grid-template-columns: 1fr; }\r\n    .tcs-carousel::before, .tcs-carousel::after{ width:38px; }\r\n    .tcs-section__head{ align-items:flex-start; flex-direction:column; }\r\n    .tcs-actions{ width:100%; justify-content:space-between; }\r\n    .tcs-close__grid{ grid-template-columns: 1fr; }\r\n    .tcs-card, .tcs-skel{ min-height: 400px; }\r\n  }\r\n  @media (max-width: 680px){\r\n    .tcs-progress{ display:none; }\r\n    .tcs-steps{ grid-template-columns: 1fr; }\r\n    .tcs-link{ padding:10px 10px; }\r\n    .tcs-card, .tcs-skel{ min-height: 380px; }\r\n  }\r\n<\/style>\r\n\r\n\r\n<main class=\"tcs-portal\">\r\n  <div class=\"tcs-wrap\">\r\n\r\n    <!-- HERO -->\r\n    <section class=\"tcs-hero\" aria-labelledby=\"tcs-hero-title\">\r\n      <div class=\"tcs-hero__grid\">\r\n        <div>\r\n          <div class=\"tcs-kicker\">\r\n            <span class=\"tcs-kicker__dot\" aria-hidden=\"true\"><\/span>\r\n           Bienvenido a nuestro portal de Microlearning | Tecsify Blog\r\n          <\/div>\r\n\r\n          <h1 id=\"tcs-hero-title\">Aprende al ritmo que se adapta a tu d\u00eda.<\/h1>\r\n          <p>\r\n            El Microlearning es una forma diferente de aprender que apuesta por fragmentar los contenidos en peque\u00f1as unidades enfocadas en desarrollar competencias espec\u00edficas. \r\n            <br><br>Estas lecciones se completan en pocos minutos y pueden realizarse desde cualquier lugar, sin depender de espacios f\u00edsicos ni de sistemas de formaci\u00f3n tradicional, el resultado es un aprendizaje m\u00e1s c\u00f3modo, r\u00e1pido y realmente eficiente.\r\n          <\/p>\r\n\r\n          <div class=\"tcs-chips\" aria-label=\"Caracter\u00edsticas\">\r\n            <span class=\"tcs-chip\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect>\r\n                <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle>\r\n                <path d=\"M21 15l-5-5L5 21\"><\/path>\r\n              <\/svg>\r\n              C\u00e1psulas visuales\r\n            <\/span>\r\n            <span class=\"tcs-chip\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"><\/polygon>\r\n              <\/svg>\r\n              Pr\u00e1ctica inmediata\r\n            <\/span>\r\n            <span class=\"tcs-chip\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n                <path d=\"M12 6v6l4 2\"><\/path>\r\n              <\/svg>\r\n              Contexto real\r\n            <\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <aside class=\"tcs-signal\" aria-label=\"Resumen editorial\">\r\n          <p class=\"tcs-signal__title\">Contenidos \u00fatiles y f\u00e1ciles de comprender, presentados en c\u00e1psulas breves y con un enfoque claro y directo.<\/p>\r\n          <div class=\"tcs-signal__metric\">\r\n            <div class=\"tcs-signal__big\">3\u20137 min<\/div>\r\n            <div class=\"tcs-signal__small\">por c\u00e1psula, enfoque directo<\/div>\r\n          <\/div>    \r\n        <\/aside>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- INFOGRAFIAS -->\r\n    <section class=\"tcs-section\" aria-labelledby=\"tcs-infos-title\">\r\n      <header class=\"tcs-section__head\">\r\n        <div>\r\n          <h2 id=\"tcs-infos-title\" class=\"tcs-section__title\">Portal de Infograf\u00edas \/ C\u00e1psulas<\/h2>\r\n          <p class=\"tcs-section__desc\">\r\nContenidos breves y modulares (aut\u00e9nticas p\u00edldoras de conocimiento) dise\u00f1ados para facilitar un aprendizaje m\u00e1s \u00e1gil, flexible y personalizado.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"tcs-actions\">\r\n          <a href=\"\/blog\/infografias\" class=\"tcs-link\">\r\n            Ver m\u00e1s contenido\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n              <path d=\"M5 12h12\"><\/path>\r\n              <path d=\"M13 6l6 6-6 6\"><\/path>\r\n            <\/svg>\r\n          <\/a>\r\n\r\n          <div class=\"tcs-controls\" aria-label=\"Controles del carrusel de infograf\u00edas\">\r\n            <button class=\"tcs-btn\" data-carousel=\"infografias\" data-dir=\"prev\" aria-label=\"Anterior\" disabled>\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n              <\/svg>\r\n            <\/button>\r\n            <button class=\"tcs-btn\" data-carousel=\"infografias\" data-dir=\"next\" aria-label=\"Siguiente\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n              <\/svg>\r\n            <\/button>\r\n            <div class=\"tcs-progress\" aria-hidden=\"true\"><i data-progress=\"infografias\"><\/i><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/header>\r\n\r\n      <div class=\"tcs-carousel\">\r\n        <div class=\"tcs-track\" id=\"tcs-carousel-infografias\" tabindex=\"0\" role=\"list\" aria-label=\"Infograf\u00edas\"><\/div>\r\n      <\/div>\r\n    <\/section>\r\n    \r\n    <!-- HORIZONTAL BANNER: Tecsify Prodigy (mismo ADN, pero m\u00e1s \u201cproducto\u201d y menos ruido) -->\r\n\r\n<section class=\"ml-banner ml-banner--prodigy\" aria-label=\"Promoci\u00f3n Tecsify Prodigy\">\r\n\r\n  <a class=\"ml-banner__card\" href=\"https:\/\/prodigy.tecsify.com\" aria-label=\"Ir a Tecsify Prodigy\">\r\n      \r\n    <span class=\"ml-banner__ring\" aria-hidden=\"true\"><\/span>\r\n\r\n    <div class=\"ml-banner__inner\">\r\n      <div class=\"ml-banner__left\">\r\n        <div class=\"ml-banner__topline\">\r\n          <span class=\"ml-banner__pill\">Tecsify Prodigy<\/span>\r\n          <span class=\"ml-banner__badge\">Gratis<\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"ml-banner__title\">\r\n          Crea tu CV con IA <span>en minutos<\/span> | Tecsify Prodigy\r\n        <\/h2>\r\n\r\n        <p class=\"ml-banner__desc\">\r\n          Crea tu hoja de vida profesional con ayuda de la IA, lista para descargar y compartir con nuestra plataforma sin costo.\r\n        <\/p>\r\n\r\n        <div class=\"ml-banner__meta\" aria-label=\"Caracter\u00edsticas\">\r\n          <span class=\"ml-banner__chip\">R\u00e1pido<\/span>\r\n          <span class=\"ml-banner__chip\">F\u00e1cil<\/span>\r\n          <span class=\"ml-banner__chip\">ATS-friendly<\/span>\r\n          <span class=\"ml-banner__chip\">PDF<\/span>          <span class=\"ml-banner__chip\">Online & Offline<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Decorativo (producto), sin robar atenci\u00f3n -->\r\n      <div class=\"ml-banner__visual\" aria-hidden=\"true\">\r\n        <div class=\"ml-banner__orb ml-banner__orb--1\"><\/div>\r\n        <div class=\"ml-banner__orb ml-banner__orb--2\"><\/div>\r\n        <div class=\"ml-banner__grid\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ml-banner__cta\">\r\n        Crear mi CV gratis\r\n        <svg class=\"ml-banner__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n          <path d=\"M5 12h12\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\r\n          <path d=\"M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n    <\/div>\r\n  <\/a>\r\n\r\n<\/section>\r\n<style>\r\n\r\n:root{\r\n  --tecsify-navy: #030399;\r\n  --tecsify-navy-2: #1a1ab8;\r\n  --tecsify-text: #121635;\r\n  --tecsify-muted: #5c6280;\r\n  --tecsify-bg: #ffffff;\r\n  --tecsify-stroke: rgba(3, 3, 153, 0.12);\r\n  --tecsify-shadow: 0 10px 26px rgba(13, 23, 60, 0.12);\r\n}\r\n\r\n\/* wrapper *\/\r\n.ml-banner{ padding: 25px 0px 0px;\r\n\r\n    \r\n}\r\n\r\n\/* card *\/\r\n.ml-banner__card{\r\n    \r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  border-radius: 18px;\r\n  text-decoration: none;\r\n  color: inherit;\r\n  box-shadow: var(--tecsify-shadow);\r\n  background: transparent;\r\n  overflow: hidden;\r\n  transform: translateZ(0);\r\n\r\n    \r\n}\r\n\r\n\/* ring (ADN) *\/\r\n.ml-banner__ring{\r\n  position: absolute;\r\n  inset: -2px;\r\n  border-radius: 20px;\r\n  background:\r\n    conic-gradient(\r\n      from 180deg,\r\n      rgba(3,3,153,0.85),\r\n      rgba(90,120,255,0.65),\r\n      rgba(3,3,153,0.85),\r\n      rgba(125,211,252,0.55),\r\n      rgba(3,3,153,0.85)\r\n    );\r\n  filter: saturate(1.05);\r\n  animation: mlb-spin 6.5s linear infinite;\r\n  pointer-events: none;\r\n  \r\n}\r\n\r\n\r\n\/* inner layout *\/\r\n.ml-banner__inner{\r\n  position: relative;\r\n  margin: 1px;\r\n  border-radius: 17px;\r\n  background: var(--tecsify-bg);\r\n  border: 1px solid var(--tecsify-stroke);\r\n\r\n  display: grid;\r\n  grid-template-columns: 1fr 160px auto;\r\n  gap: 14px;\r\n  align-items: center;\r\n\r\n  padding: 14px 18px;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* shimmer sutil *\/\r\n.ml-banner__inner::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-40% -30%;\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(255,255,255,0) 0%,\r\n    rgba(3,3,153,.05) 38%,\r\n    rgba(3,3,153,.10) 50%,\r\n    rgba(3,3,153,.05) 62%,\r\n    rgba(255,255,255,0) 100%\r\n  );\r\n  transform: rotate(8deg) translateX(-55%);\r\n  animation: mlb-shimmer 9.4s cubic-bezier(.2,.8,.2,1) infinite;\r\n  pointer-events: none;\r\n  opacity: .90;\r\n}\r\n\r\n\/* left content *\/\r\n.ml-banner__left{ position: relative; z-index: 1; min-width: 0; }\r\n\r\n.ml-banner__topline{\r\n    \r\n  display:flex;\r\n  align-items:center;\r\n  gap: 8px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.ml-banner__pill{\r\n  display: inline-flex;\r\n  align-items: center;\r\n  padding: 6px 10px;\r\n  border-radius: 999px;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n  letter-spacing: .06em;\r\n  text-transform: uppercase;\r\n  color: var(--tecsify-navy);\r\n  background: rgba(3,3,153,0.06);\r\n  border: 1px solid rgba(3,3,153,0.12);\r\n}\r\n\r\n.ml-banner__badge{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  padding: 6px 10px;\r\n  border-radius: 999px;\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  color: #0b1020;\r\n  background: rgba(125, 211, 252, 0.55);\r\n  border: 1px solid rgba(3,3,153,0.10);\r\n}\r\n\r\n\/* title *\/\r\n.ml-banner__title{\r\n  margin: 6px 0 6px;\r\n  font-size: clamp(18px, 2.0vw, 22px);\r\n  line-height: 1.15;\r\n  font-weight: 950;\r\n  letter-spacing: -0.02em;\r\n  color: var(--tecsify-text);\r\n}\r\n.ml-banner__title span{\r\n  color: var(--tecsify-navy);\r\n  font-weight: 950;\r\n}\r\n\r\n\/* desc *\/\r\n.ml-banner__desc{\r\n  margin: 0 0 10px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--tecsify-muted);\r\n  max-width: 66ch;\r\n\r\n  display:-webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow:hidden;\r\n}\r\n\r\n\/* chips *\/\r\n.ml-banner__meta{\r\n  display:flex;\r\n  flex-wrap: wrap;\r\n  gap: 7px;\r\n}\r\n.ml-banner__chip{\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  color: rgba(18,22,53,0.85);\r\n  background: rgba(13,23,60,0.04);\r\n  border: 1px solid rgba(13,23,60,0.08);\r\n  padding: 6px 10px;\r\n  border-radius: 999px;\r\n}\r\n\r\n\/* visual block (producto) *\/\r\n.ml-banner__visual{\r\n  position: relative;\r\n  height: 78px;\r\n  border-radius: 16px;\r\n  border: 1px solid rgba(3,3,153,0.10);\r\n  background:\r\n    radial-gradient(18px 18px at 30% 30%, rgba(3,3,153,0.18), transparent 70%),\r\n    radial-gradient(18px 18px at 70% 70%, rgba(26,26,184,0.14), transparent 70%),\r\n    linear-gradient(135deg, rgba(3,3,153,0.10), rgba(3,3,153,0.02));\r\n  overflow: hidden;\r\n}\r\n.ml-banner__grid{\r\n  position:absolute;\r\n  inset: 0;\r\n  background:\r\n    linear-gradient(rgba(3,3,153,.10) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(3,3,153,.10) 1px, transparent 1px);\r\n  background-size: 26px 26px;\r\n  opacity: .18;\r\n  pointer-events:none;\r\n}\r\n.ml-banner__orb{\r\n  position:absolute;\r\n  border-radius: 999px;\r\n  background: radial-gradient(circle at 30% 30%, rgba(90,120,255,.35), transparent 65%);\r\n  filter: saturate(1.05);\r\n  opacity: .9;\r\n  animation: mlb-float 6.5s ease-in-out infinite;\r\n}\r\n.ml-banner__orb--1{\r\n  width: 62px; height: 62px;\r\n  top: -18px; left: -12px;\r\n}\r\n.ml-banner__orb--2{\r\n  width: 74px; height: 74px;\r\n  bottom: -26px; right: -22px;\r\n  animation-duration: 7.8s;\r\n  opacity: .75;\r\n}\r\n\r\n\/* CTA *\/\r\n.ml-banner__cta{\r\n  position: relative;\r\n  z-index: 1;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n\r\n  padding: 10px 12px;\r\n  border-radius: 12px;\r\n\r\n  background: linear-gradient(135deg, var(--tecsify-navy), var(--tecsify-navy-2));\r\n  color: #fff;\r\n\r\n  font-size: 12px;\r\n  font-weight: 950;\r\n  letter-spacing: .08em;\r\n  text-transform: uppercase;\r\n\r\n  box-shadow: 0 10px 18px rgba(3,3,153,0.22);\r\n  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;\r\n  white-space: nowrap;\r\n}\r\n.ml-banner__arrow{ width: 18px; height: 18px; }\r\n\r\n\r\n\r\n\/* Hover *\/\r\n@media (hover:hover){\r\n  .ml-banner__card:hover .ml-banner__cta{\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 14px 24px rgba(3,3,153,0.30);\r\n    filter: saturate(1.05);\r\n  }\r\n  .ml-banner__card:hover .ml-banner__ring{\r\n    filter: saturate(1.15) brightness(1.02);\r\n  }\r\n  .ml-banner__card:hover{\r\n    box-shadow: 0 14px 34px rgba(13, 23, 60, 0.14);\r\n  }\r\n}\r\n\r\n\/* Focus *\/\r\n.ml-banner__card:focus-visible{\r\n  outline: 3px solid rgba(3,3,153,0.30);\r\n  outline-offset: 3px;\r\n  border-radius: 18px;\r\n}\r\n\r\n\/* Animations *\/\r\n@keyframes mlb-spin{ to { transform: rotate(360deg); } }\r\n@keyframes mlb-shimmer{\r\n  0%   { transform: rotate(8deg) translateX(-60%); opacity: 0; }\r\n  12%  { opacity: .70; }\r\n  60%  { opacity: .45; }\r\n  100% { transform: rotate(8deg) translateX(60%); opacity: 0; }\r\n}\r\n@keyframes mlb-float{\r\n  0%,100% { transform: translate(0,0); }\r\n  50%     { transform: translate(10px, -6px); }\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 820px){\r\n  .ml-banner__inner{\r\n    grid-template-columns: 1fr auto;\r\n    grid-template-rows: auto auto;\r\n  }\r\n  .ml-banner__visual{ display:none; }\r\n  .ml-banner__cta{ justify-self: end; align-self: start; }\r\n}\r\n@media (max-width: 560px){\r\n  .ml-banner{ padding: 10px 14px 10px; }\r\n  .ml-banner__inner{\r\n    grid-template-columns: 1fr;\r\n    grid-template-rows: auto auto;\r\n    gap: 10px;\r\n  }\r\n  .ml-banner__cta{ width: 100%; }\r\n}\r\n\r\n\/* Reduced motion *\/\r\n@media (prefers-reduced-motion: reduce){\r\n  .ml-banner__ring,\r\n  .ml-banner__inner::before,\r\n  .ml-banner__orb{\r\n    animation: none !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n    \r\n\r\n    <!-- CODIGOS -->\r\n    <section class=\"tcs-section\" aria-labelledby=\"tcs-codes-title\">\r\n      <header class=\"tcs-section__head\">\r\n        <div>\r\n          <h2 id=\"tcs-codes-title\" class=\"tcs-section__title\">Portal de Ejercicios de Programaci\u00f3n<\/h2>\r\n          <p class=\"tcs-section__desc\">\r\n            C\u00f3digo explicado, listo para ejecutar y modificar. Ejemplos funcionales para adaptar a tus proyectos.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"tcs-actions\">\r\n          <a href=\"\/blog\/codigos\" class=\"tcs-link\">\r\n            Ver m\u00e1s c\u00f3digos\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n              <path d=\"M5 12h12\"><\/path>\r\n              <path d=\"M13 6l6 6-6 6\"><\/path>\r\n            <\/svg>\r\n          <\/a>\r\n\r\n          <div class=\"tcs-controls\" aria-label=\"Controles del carrusel de c\u00f3digos\">\r\n            <button class=\"tcs-btn\" data-carousel=\"codigos\" data-dir=\"prev\" aria-label=\"Anterior\" disabled>\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n              <\/svg>\r\n            <\/button>\r\n            <button class=\"tcs-btn\" data-carousel=\"codigos\" data-dir=\"next\" aria-label=\"Siguiente\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n              <\/svg>\r\n            <\/button>\r\n            <div class=\"tcs-progress\" aria-hidden=\"true\"><i data-progress=\"codigos\"><\/i><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/header>\r\n\r\n      <div class=\"tcs-carousel\">\r\n        <div class=\"tcs-track\" id=\"tcs-carousel-codigos\" tabindex=\"0\" role=\"list\" aria-label=\"C\u00f3digos\"><\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- CIERRE -->\r\n    <section class=\"tcs-close\" aria-labelledby=\"tcs-close-title\">\r\n      <div class=\"tcs-close__grid\">\r\n        <div>\r\n          <h2 id=\"tcs-close-title\">Tu ritmo, tu proceso<\/h2>\r\n          <p>\r\nUna biblioteca de c\u00e1psulas tech pensadas para consultarse cuando las necesitas o cuando quieres aprender algo nuevo.\r\n<br><br>Lecturas breves que aportan claridad, contexto y criterio t\u00e9cnico.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"tcs-steps\" aria-label=\"C\u00f3mo funciona\">\r\n          <div class=\"tcs-step\">\r\n            <div class=\"tcs-step__k\"><span class=\"tcs-step__n\">1<\/span> Mira<\/div>\r\n            <p class=\"tcs-step__t\">Elige una c\u00e1psula<\/p>\r\n            <p class=\"tcs-step__d\">Puedes elegir una c\u00e1psula seg\u00fan una necesidad real, sin seguir un orden impuesto.<\/p>\r\n          <\/div>\r\n          <div class=\"tcs-step\">\r\n            <div class=\"tcs-step__k\"><span class=\"tcs-step__n\">2<\/span> Entiende<\/div>\r\n            <p class=\"tcs-step__t\">Una sola idea, explicada con calma.<\/p>\r\n            <p class=\"tcs-step__d\">Pensada para que resulte clara desde el primer momento<\/p>\r\n          <\/div>\r\n          <div class=\"tcs-step\">\r\n            <div class=\"tcs-step__k\"><span class=\"tcs-step__n\">3<\/span> Prueba<\/div>\r\n            <p class=\"tcs-step__t\">Ll\u00e9vala a tu contexto<\/p>\r\n            <p class=\"tcs-step__d\">Ah\u00ed es donde el aprendizaje se vuelve \u00fatil.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/div>\r\n<\/main>\r\n\r\n<script>\r\n(() => {\r\n  \/* =========================\r\n     Config\r\n  ========================== *\/\r\n  const MAX_ITEMS = 6;\r\n\r\n  const WP = {\r\n    infografias: \"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/infografia?_embed&per_page=6&orderby=date&order=desc\",\r\n    codigos:     \"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/codigo?_embed&per_page=6&orderby=date&order=desc\"\r\n  };\r\n\r\n  const prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/* =========================\r\n     Helpers\r\n  ========================== *\/\r\n  function decodeHTML(html) {\r\n    const txt = document.createElement(\"textarea\");\r\n    txt.innerHTML = html || \"\";\r\n    return txt.value;\r\n  }\r\n\r\n  function stripHTML(html) {\r\n    const div = document.createElement(\"div\");\r\n    div.innerHTML = html || \"\";\r\n    return (div.textContent || div.innerText || \"\").trim();\r\n  }\r\n\r\n  function truncate(text, max = 120) {\r\n    const t = (text || \"\").replace(\/\\s+\/g, \" \").trim();\r\n    if (t.length <= max) return t;\r\n    return t.slice(0, max - 1).trim() + \"\u2026\";\r\n  }\r\n\r\n  function getFeaturedImageFromEmbed(post) {\r\n    const fm = post?._embedded?.[\"wp:featuredmedia\"]?.[0];\r\n    if (!fm) return \"\";\r\n    const sizes = fm?.media_details?.sizes;\r\n    return (\r\n      sizes?.medium_large?.source_url ||\r\n      sizes?.large?.source_url ||\r\n      fm?.source_url ||\r\n      \"\"\r\n    );\r\n  }\r\n\r\n  function fallbackImage(kind) {\r\n    const base = kind === \"C\u00f3digo\"\r\n      ? \"030399\/ffffff?text=C%C3%B3digo\"\r\n      : \"e8e8f0\/030399?text=Infograf%C3%ADa\";\r\n    return `https:\/\/via.placeholder.com\/900x560\/${base}`;\r\n  }\r\n\r\n  async function fetchJSON(url) {\r\n    const res = await fetch(url, { headers: { \"Accept\": \"application\/json\" } });\r\n    if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);\r\n    return res.json();\r\n  }\r\n\r\n  function mapInfografia(post) {\r\n    const title = decodeHTML(post?.title?.rendered || \"Sin t\u00edtulo\");\r\n    const href  = post?.link || \"#\";\r\n    const img   = getFeaturedImageFromEmbed(post) || fallbackImage(\"Infograf\u00eda\");\r\n    const rawExcerpt =\r\n      stripHTML(post?.excerpt?.rendered) ||\r\n      post?.yoast_head_json?.description ||\r\n      \"\";\r\n    return {\r\n      title,\r\n      href,\r\n      img,\r\n      pill: \"Infograf\u00eda\",\r\n      excerpt: truncate(rawExcerpt || \"Una c\u00e1psula visual dise\u00f1ada para entender r\u00e1pido y recordar mejor.\", 120),\r\n      meta: \"Visual + contexto\"\r\n    };\r\n  }\r\n\r\n  function mapCodigo(post) {\r\n    const title = decodeHTML(post?.title?.rendered || post?.acf?.titulo || \"Sin t\u00edtulo\");\r\n    const href  = post?.link || \"#\";\r\n    const img   = getFeaturedImageFromEmbed(post) || fallbackImage(\"C\u00f3digo\");\r\n    const rawExcerpt =\r\n      stripHTML(post?.acf?.descripcion) ||\r\n      stripHTML(post?.excerpt?.rendered) ||\r\n      post?.yoast_head_json?.description ||\r\n      \"\";\r\n    const lenguaje = (post?.acf?.lenguaje || \"\").trim();\r\n    return {\r\n      title,\r\n      href,\r\n      img,\r\n      pill: \"C\u00f3digo\",\r\n      excerpt: truncate(rawExcerpt || \"Ejemplo funcional listo para ejecutar, entender y adaptar a tu proyecto.\", 120),\r\n      meta: lenguaje ? `Stack: ${lenguaje}` : \"Ejecutable + editable\"\r\n    };\r\n  }\r\n\r\n  function escapeAttr(s){\r\n    return String(s || \"\").replace(\/\"\/g, \"&quot;\");\r\n  }\r\n\r\n  function cardTemplate({ href, img, pill, title, excerpt, meta }) {\r\n    const aria = `${pill || \"Contenido\"}: ${escapeAttr(title)}`;\r\n    return `\r\n      <a class=\"tcs-card\" href=\"${href || \"#\"}\" role=\"listitem\" aria-label=\"${aria}\">\r\n        <span class=\"tcs-card__rim\" aria-hidden=\"true\"><\/span>\r\n        <article class=\"tcs-card__body\">\r\n          <div class=\"tcs-card__media\">\r\n            <img src=\"${img}\" alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n          <\/div>\r\n\r\n          <div class=\"tcs-card__content\">\r\n            <span class=\"tcs-pill\"><i aria-hidden=\"true\"><\/i>${pill || \"Contenido\"}<\/span>\r\n            <h3 class=\"tcs-card__title\">${title || \"Sin t\u00edtulo\"}<\/h3>\r\n            <p class=\"tcs-card__meta\">${excerpt || \"\"}<\/p>\r\n\r\n            <div class=\"tcs-card__footer\">\r\n              <span title=\"${escapeAttr(meta)}\">${meta || \"Lectura breve\"}<\/span>\r\n              <span class=\"tcs-card__hint\">\r\n                Ver\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n                  <path d=\"M5 12h12\"><\/path>\r\n                  <path d=\"M13 6l6 6-6 6\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/article>\r\n      <\/a>\r\n    `;\r\n  }\r\n\r\n  function renderCards(trackEl, items) {\r\n    if (!trackEl) return;\r\n    trackEl.innerHTML = items.map(cardTemplate).join(\"\");\r\n  }\r\n\r\n  \/* =========================\r\n     Loading skeleton (6 items)\r\n  ========================== *\/\r\n  function setSkeleton(trackEl){\r\n    if (!trackEl) return;\r\n    const skel = (i) => `\r\n      <div class=\"tcs-skel\" role=\"listitem\" aria-label=\"Cargando contenido\">\r\n        <div class=\"tcs-skel__media\"><\/div>\r\n        <div class=\"tcs-skel__body\">\r\n          <div class=\"tcs-skel__line w-40\"><\/div>\r\n          <div class=\"tcs-skel__line w-85\"><\/div>\r\n          <div class=\"tcs-skel__line w-65\"><\/div>\r\n          <div class=\"tcs-skel__line w-55\" style=\"margin-top:auto;\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n    trackEl.innerHTML = new Array(MAX_ITEMS).fill(0).map((_,i)=>skel(i)).join(\"\");\r\n  }\r\n\r\n  function setError(trackEl, label){\r\n    if (!trackEl) return;\r\n    trackEl.innerHTML = `\r\n      <div style=\"\r\n        flex: 0 0 100%;\r\n        padding: 10px;\r\n        color: rgba(18,22,53,.75);\r\n        font-size: 13px;\">\r\n        No se pudo cargar ${label}. Intenta recargar la p\u00e1gina.\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  \/* =========================\r\n     Conic spin (global, slow)\r\n  ========================== *\/\r\n  function startConicSpin(){\r\n    if (prefersReduced) return;\r\n    let start = performance.now();\r\n    const step = (t) => {\r\n      const deg = ((t - start) \/ 90) % 360; \/\/ lento\r\n      document.documentElement.style.setProperty(\"--tcs-spin\", deg + \"deg\");\r\n      requestAnimationFrame(step);\r\n    };\r\n    requestAnimationFrame(step);\r\n  }\r\n\r\n  \/* =========================\r\n     Carousel UX\r\n     - Buttons state\r\n     - Progress thumb (px, correct end)\r\n     - Drag \/ keyboard\r\n  ========================== *\/\r\n  function getScrollAmount(track){\r\n    const card = track.querySelector(\".tcs-card\") || track.querySelector(\".tcs-skel\");\r\n    if (!card) return 320;\r\n\r\n    const styles = getComputedStyle(track);\r\n    const gap = parseFloat(styles.gap || styles.columnGap || \"0\") || 0;\r\n    const w = card.getBoundingClientRect().width;\r\n    return w + gap;\r\n  }\r\n\r\n  function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }\r\n\r\n  function updateProgress(track, progressEl){\r\n    if (!progressEl) return;\r\n\r\n    const host = progressEl.parentElement; \/\/ .tcs-progress\r\n    if (!host) return;\r\n\r\n    const hostW = host.getBoundingClientRect().width;\r\n    const max = track.scrollWidth - track.clientWidth;\r\n\r\n    \/\/ thumb width = viewport ratio (clamped), in px\r\n    const ratio = track.scrollWidth > 0 ? (track.clientWidth \/ track.scrollWidth) : 1;\r\n    const thumbW = clamp(hostW * ratio, hostW * 0.22, hostW * 0.55);\r\n\r\n    \/\/ position in px (0 .. hostW - thumbW)\r\n    const pct = max <= 0 ? 0 : (track.scrollLeft \/ max);\r\n    const x = (hostW - thumbW) * clamp(pct, 0, 1);\r\n\r\n    progressEl.style.width = thumbW.toFixed(2) + \"px\";\r\n    progressEl.style.transform = `translateX(${x.toFixed(2)}px)`;\r\n  }\r\n\r\n  function updateButtons(track, prevBtn, nextBtn){\r\n    const max = track.scrollWidth - track.clientWidth;\r\n    const x = track.scrollLeft;\r\n\r\n    prevBtn.disabled = x <= 2;\r\n    nextBtn.disabled = x >= (max - 2);\r\n  }\r\n\r\n  function enableDrag(track){\r\n    let isDown = false;\r\n    let startX = 0;\r\n    let startScroll = 0;\r\n\r\n    const down = (e) => {\r\n      isDown = true;\r\n      startX = (e.touches ? e.touches[0].clientX : e.clientX);\r\n      startScroll = track.scrollLeft;\r\n    };\r\n    const move = (e) => {\r\n      if (!isDown) return;\r\n      const x = (e.touches ? e.touches[0].clientX : e.clientX);\r\n      const dx = x - startX;\r\n      track.scrollLeft = startScroll - dx;\r\n    };\r\n    const up = () => { isDown = false; };\r\n\r\n    track.addEventListener(\"mousedown\", down, { passive:true });\r\n    track.addEventListener(\"mousemove\", move, { passive:true });\r\n    track.addEventListener(\"mouseleave\", up, { passive:true });\r\n    track.addEventListener(\"mouseup\", up, { passive:true });\r\n\r\n    track.addEventListener(\"touchstart\", down, { passive:true });\r\n    track.addEventListener(\"touchmove\", move, { passive:true });\r\n    track.addEventListener(\"touchend\", up, { passive:true });\r\n  }\r\n\r\n  function enableKeyboard(track){\r\n    track.addEventListener(\"keydown\", (e) => {\r\n      const amount = getScrollAmount(track);\r\n      if (e.key === \"ArrowRight\") track.scrollBy({ left: amount, behavior: prefersReduced ? \"auto\" : \"smooth\" });\r\n      if (e.key === \"ArrowLeft\")  track.scrollBy({ left: -amount, behavior: prefersReduced ? \"auto\" : \"smooth\" });\r\n    });\r\n  }\r\n\r\n  function initCarousel(name){\r\n    const track = document.getElementById(`tcs-carousel-${name}`);\r\n    if (!track) return;\r\n\r\n    const prevBtn = document.querySelector(`.tcs-btn[data-carousel=\"${name}\"][data-dir=\"prev\"]`);\r\n    const nextBtn = document.querySelector(`.tcs-btn[data-carousel=\"${name}\"][data-dir=\"next\"]`);\r\n    const prog = document.querySelector(`[data-progress=\"${name}\"]`);\r\n    if (!prevBtn || !nextBtn) return;\r\n\r\n    prevBtn.onclick = () => track.scrollBy({ left: -getScrollAmount(track), behavior: prefersReduced ? \"auto\" : \"smooth\" });\r\n    nextBtn.onclick = () => track.scrollBy({ left:  getScrollAmount(track), behavior: prefersReduced ? \"auto\" : \"smooth\" });\r\n\r\n    const sync = () => {\r\n      updateButtons(track, prevBtn, nextBtn);\r\n      updateProgress(track, prog);\r\n    };\r\n\r\n    \/\/ rAF throttle scroll\r\n    track.addEventListener(\"scroll\", () => {\r\n      if (track._ticking) return;\r\n      track._ticking = true;\r\n      requestAnimationFrame(() => { sync(); track._ticking = false; });\r\n    }, { passive:true });\r\n\r\n    window.addEventListener(\"resize\", sync, { passive:true });\r\n\r\n    enableDrag(track);\r\n    enableKeyboard(track);\r\n\r\n    \/\/ initial\r\n    sync();\r\n  }\r\n\r\n  function initAll(){\r\n    initCarousel(\"infografias\");\r\n    initCarousel(\"codigos\");\r\n  }\r\n\r\n  \/* =========================\r\n     Boot\r\n  ========================== *\/\r\n  async function boot(){\r\n    const trackInf = document.getElementById(\"tcs-carousel-infografias\");\r\n    const trackCod = document.getElementById(\"tcs-carousel-codigos\");\r\n\r\n    setSkeleton(trackInf);\r\n    setSkeleton(trackCod);\r\n\r\n    startConicSpin();\r\n\r\n    try{\r\n      const [infRaw, codRaw] = await Promise.all([\r\n        fetchJSON(WP.infografias),\r\n        fetchJSON(WP.codigos)\r\n      ]);\r\n\r\n      const infItems = (infRaw || []).slice(0, MAX_ITEMS).map(mapInfografia);\r\n      const codItems = (codRaw || []).slice(0, MAX_ITEMS).map(mapCodigo);\r\n\r\n      renderCards(trackInf, infItems);\r\n      renderCards(trackCod, codItems);\r\n\r\n      \/\/ important after render (measure cards)\r\n      initAll();\r\n\r\n      \/\/ ensure progress correct after images load (layout shift)\r\n      const imgs = document.querySelectorAll(\"#tcs-carousel-infografias img, #tcs-carousel-codigos img\");\r\n      let pending = 0;\r\n      imgs.forEach(img => {\r\n        if (img.complete) return;\r\n        pending++;\r\n        img.addEventListener(\"load\", () => {\r\n          pending--;\r\n          if (pending <= 0) initAll();\r\n        }, { once:true });\r\n      });\r\n\r\n    }catch(err){\r\n      console.error(\"WP fetch error:\", err);\r\n      setError(trackInf, \"infograf\u00edas\");\r\n      setError(trackCod, \"c\u00f3digos\");\r\n    }\r\n  }\r\n\r\n  boot();\r\n})();\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2dea3da elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2dea3da\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f9addc2\" data-id=\"f9addc2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-35a3f20 elementor-widget elementor-widget-html\" data-id=\"35a3f20\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"nl\" aria-labelledby=\"nl-title\">\r\n  <div class=\"nl__inner\">\r\n    <div class=\"nl__badge\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"nl__copy\">\r\n      <h2 class=\"nl__title\" id=\"nl-title\">Suscr\u00edbete al newsletter<\/h2>\r\n      <p class=\"nl__desc\" id=\"nl-desc\">\r\n        Un correo semanal con contenido \u00fatil de tecnolog\u00eda, aprendizaje pr\u00e1ctico y lo mejor de Tecsify.\r\n      <\/p>\r\n\r\n<form class=\"nl__form\"\r\n      id=\"nl-form\"\r\n      method=\"POST\"\r\n      action=\"https:\/\/8bc223e9.sibforms.com\/serve\/MUIFAO9qy0KTN30KkyZNnczvj2yOZJZFfkqLNNDKHQZMfBONrsA3uhkL2x_ODmrxukZo009XAb8GlmdkuQljT7Ek0mv--hhlXsV8qJWNGeLIGXt-uFmSjcY6KIhMgw8YVhU75wQJOfM924-svXNUPWBc2S9qq5qAxlc9CUSfJrgnfzFoszkt6hIna-gBJ9XazvLBTQLypvtETqLr?isAjax=1\"\r\n      aria-describedby=\"nl-desc nl-fineprint nl-status\">\r\n\r\n  <label class=\"nl__label\" for=\"nl-email\">Tu correo<\/label>\r\n\r\n  <div class=\"nl__field\">\r\n    <input id=\"nl-email\"\r\n           class=\"nl__input\"\r\n           type=\"email\"\r\n           name=\"EMAIL\"\r\n           placeholder=\"nombre@correo.com\"\r\n           autocomplete=\"email\"\r\n           required\r\n           inputmode=\"email\"\r\n           aria-describedby=\"nl-desc nl-fineprint nl-status\"\r\n           aria-required=\"true\">\r\n\r\n    <button class=\"nl__btn\" type=\"submit\" aria-describedby=\"nl-status\">\r\n      Suscribirme <span class=\"nl__arrow\" aria-hidden=\"true\">\u203a<\/span>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <p class=\"nl__fineprint\" id=\"nl-fineprint\">Sin spam. Puedes salir cuando quieras.<\/p>\r\n  <p class=\"nl__status\" id=\"nl-status\" aria-live=\"polite\" aria-atomic=\"true\" role=\"status\"><\/p>\r\n\r\n  <!-- honeypot (debe quedar vac\u00edo) -->\r\n  <input type=\"text\"\r\n         name=\"email_address_check\"\r\n         value=\"\"\r\n         tabindex=\"-1\"\r\n         autocomplete=\"off\"\r\n         aria-hidden=\"true\"\r\n         style=\"display:none\">\r\n\r\n  <!-- idioma -->\r\n  <input type=\"hidden\" name=\"locale\" value=\"es\">\r\n<\/form>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"nl__visual\" aria-hidden=\"true\">\r\n      <div class=\"nl__chip\">Microlearning<\/div>\r\n      <div class=\"nl__chip\">Ejercicios<\/div>\r\n      <div class=\"nl__chip\">Gu\u00edas<\/div>\r\n      <div class=\"nl__chip\">IA<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<script>\r\n(function () {\r\n  const form = document.getElementById('nl-form');\r\n  if (!form) return;\r\n\r\n  const statusEl = document.getElementById('nl-status');\r\n  const btn = form.querySelector('button[type=\"submit\"]');\r\n\r\n  function setStatus(msg) {\r\n    if (statusEl) statusEl.textContent = msg || '';\r\n  }\r\n\r\n  function showPopup() {\r\n    const popup = document.getElementById('nl-popup'); \/\/ <-- clave: buscarlo al momento\r\n    if (!popup) return;\r\n\r\n    popup.classList.add('is-visible');\r\n    popup.setAttribute('aria-hidden', 'false');\r\n\r\n    \/\/ autocierre\r\n    setTimeout(() => {\r\n      popup.classList.remove('is-visible');\r\n      popup.setAttribute('aria-hidden', 'true');\r\n    }, 8000);\r\n  }\r\n\r\n  \/\/ Honeypot de Brevo (si existe)\r\n  function isBot() {\r\n    const hp = form.querySelector('input[name=\"email_address_check\"]');\r\n    return !!(hp && hp.value && hp.value.trim().length > 0);\r\n  }\r\n\r\n  form.addEventListener('submit', async function (e) {\r\n    e.preventDefault();\r\n    setStatus('');\r\n    if (btn) btn.disabled = true;\r\n\r\n    if (isBot()) {\r\n      if (btn) btn.disabled = false;\r\n      return;\r\n    }\r\n\r\n    try {\r\n      const formData = new FormData(form);\r\n\r\n      const res = await fetch(form.action, {\r\n        method: 'POST',\r\n        body: formData\r\n      });\r\n\r\n      const text = await res.text();\r\n\r\n      const ok = res.ok && (\r\n        \/thank\\s*you\/i.test(text) ||\r\n        \/success\/i.test(text) ||\r\n        \/subscribed\/i.test(text) ||\r\n        \/subscription\/i.test(text) ||\r\n        \/confirm\/i.test(text) ||\r\n        \/almost\\s*finished\/i.test(text) ||\r\n        \/check\\s+your\\s+inbox\/i.test(text)\r\n      );\r\n\r\n      if (ok) {\r\n        setStatus('Listo. Revisa tu correo para confirmar la suscripci\u00f3n.');\r\n        form.reset();\r\n        showPopup();\r\n      } else {\r\n        setStatus('Si tu correo es v\u00e1lido, en breve recibir\u00e1s un email para confirmar la suscripci\u00f3n.');\r\n        \/\/ (opcional) si quieres mostrar modal tambi\u00e9n aqu\u00ed:\r\n        \/\/ showPopup();\r\n      }\r\n    } catch (err) {\r\n      setStatus('Error de conexi\u00f3n. Revisa tu internet e int\u00e9ntalo otra vez.');\r\n    } finally {\r\n      if (btn) btn.disabled = false;\r\n    }\r\n  });\r\n})();\r\n<\/script>\r\n\r\n\r\n\r\n<style>\r\n    \/* ====== NEWSLETTER (match con tu sistema) ====== *\/\r\n.nl{\r\n  padding: 14px 24px 18px;\r\n}\r\n\r\n.nl__inner{\r\n  position: relative;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n\r\n  display:grid;\r\n  grid-template-columns: 1.2fr .8fr;\r\n  gap: 18px;\r\n  align-items: center;\r\n\r\n  padding: 20px 18px;\r\n\r\n  \/* mismo lenguaje visual: oscuro + glow *\/\r\n  background:\r\n    radial-gradient(900px 420px at 18% 10%, rgba(31,76,255,.26), transparent 60%),\r\n    radial-gradient(680px 420px at 86% 40%, rgba(120,80,255,.16), transparent 62%),\r\n    linear-gradient(180deg, #070b18 0%, #0b0f1f 60%, #070b18 100%);\r\n  border: 1px solid rgba(255,255,255,.07);\r\n  box-shadow: 0 22px 70px rgba(0,0,0,.28);\r\n}\r\n\r\n\/* scanline superior *\/\r\n.nl__inner::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  top:0;\r\n  left:0;\r\n  right:0;\r\n  height:2px;\r\n  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(60,120,255,.95), rgba(255,255,255,0));\r\n  opacity:.85;\r\n  pointer-events:none;\r\n}\r\n\r\n\/* badge\/dot \u201cvivo\u201d *\/\r\n.nl__badge{\r\n  position:absolute;\r\n  top: 14px;\r\n  left: 14px;\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 999px;\r\n  background: rgba(60,120,255,.95);\r\n  box-shadow: 0 0 0 6px rgba(60,120,255,.18);\r\n}\r\n\r\n\/* Copy *\/\r\n.nl__copy{\r\n  position: relative;\r\n  z-index: 1;\r\n  min-width: 0;\r\n}\r\n\r\n.nl__title{\r\n  margin: 0 0 6px 0;\r\n  font-size: clamp(18px, 2.1vw, 26px);\r\n  line-height: 1.12;\r\n  font-weight: 950;\r\n  letter-spacing: -0.02em;\r\n  color:#fff;\r\n}\r\n\r\n.nl__desc{\r\n  margin: 0 0 14px 0;\r\n  font-size: 13.5px;\r\n  line-height: 1.55;\r\n  color: rgba(255,255,255,.78);\r\n  max-width: 68ch;\r\n}\r\n\r\n\/* Form *\/\r\n.nl__form{ margin: 0; }\r\n\r\n.nl__label{\r\n  position:absolute;\r\n  width:1px;\r\n  height:1px;\r\n  padding:0;\r\n  margin:-1px;\r\n  overflow:hidden;\r\n  clip: rect(0,0,0,0);\r\n  white-space:nowrap;\r\n  border:0;\r\n}\r\n\r\n.nl__field{\r\n  display:flex;\r\n  gap: 10px;\r\n  align-items: center;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n\r\n  background: rgba(255,255,255,.08);\r\n  border: 1px solid rgba(255,255,255,.10);\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);\r\n}\r\n\r\n.nl__input{\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  height: 44px;\r\n  border-radius: 12px;\r\n  border: 1px solid rgba(255,255,255,.12);\r\n  background: rgba(255,255,255,.10);\r\n  color:#fff;\r\n\r\n  padding: 0 12px;\r\n  font-size: 14px;\r\n  outline: none;\r\n}\r\n\r\n.nl__input::placeholder{\r\n  color: rgba(255,255,255,.60);\r\n}\r\n\r\n.nl__input:focus{\r\n  border-color: rgba(40,90,255,.55);\r\n  box-shadow: 0 0 0 3px rgba(40,90,255,.25);\r\n}\r\n\r\n.nl__btn{\r\n  flex: 0 0 auto;\r\n  height: 44px;\r\n  padding: 0 14px;\r\n  border-radius: 999px;\r\n  border: 1px solid rgba(255,255,255,.14);\r\n\r\n  background: rgba(255,255,255,.92);\r\n  color: rgba(31,76,255,1);\r\n\r\n  font-size: 12px;\r\n  font-weight: 950;\r\n  letter-spacing: .12em;\r\n  text-transform: uppercase;\r\n\r\n  cursor:pointer;\r\n  box-shadow: 0 16px 45px rgba(0,0,0,.25);\r\n  transition: transform .22s ease, opacity .22s ease;\r\n}\r\n\r\n.nl__arrow{\r\n  font-size: 16px;\r\n  line-height: 1;\r\n  margin-left: 6px;\r\n  transform: translateY(-1px);\r\n}\r\n\r\n@media (hover:hover){\r\n  .nl__btn:hover{ transform: translateY(-1px); opacity: .92; }\r\n}\r\n\r\n.nl__btn:focus-visible{\r\n  outline:none;\r\n  box-shadow: 0 0 0 2px rgba(255,255,255,.22), 0 0 0 5px rgba(40,90,255,.40);\r\n}\r\n\r\n.nl__fineprint{\r\n  margin: 10px 2px 0;\r\n  font-size: 12px;\r\n  color: rgba(255,255,255,.62);\r\n}\r\n\r\n\/* Visual chips *\/\r\n.nl__visual{\r\n  position: relative;\r\n  z-index: 1;\r\n  display:flex;\r\n  flex-wrap: wrap;\r\n  justify-content: flex-end;\r\n  gap: 10px;\r\n  padding-left: 10px;\r\n}\r\n\r\n.nl__chip{\r\n  padding: 10px 12px;\r\n  border-radius: 999px;\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  letter-spacing: .06em;\r\n\r\n  color: rgba(255,255,255,.86);\r\n  background: rgba(255,255,255,.08);\r\n  border: 1px solid rgba(255,255,255,.10);\r\n  box-shadow: 0 14px 36px rgba(0,0,0,.20);\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 820px){\r\n  .nl{ padding: 12px 14px 16px; }\r\n  .nl__inner{\r\n    grid-template-columns: 1fr;\r\n    gap: 14px;\r\n    padding: 18px 14px;\r\n  }\r\n  .nl__visual{\r\n    justify-content: flex-start;\r\n    padding-left: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 520px){\r\n  .nl__field{\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n  }\r\n  .nl__btn{\r\n    width: 100%;\r\n    justify-content: center;\r\n  }\r\n}\r\n\r\n.nl__status{\r\n  margin: 8px 2px 0;\r\n  font-size: 12px;\r\n  color: rgba(255,255,255,.78);\r\n}\r\n\r\n\r\n<\/style>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bienvenido a nuestro portal de Microlearning | Tecsify Blog Aprende al ritmo que se adapta a tu d\u00eda. El Microlearning es una forma diferente de aprender que apuesta por fragmentar los contenidos en peque\u00f1as unidades enfocadas en desarrollar competencias espec\u00edficas. Estas lecciones se completan en pocos minutos y pueden realizarse desde cualquier lugar, sin depender [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3956,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3936","page","type-page","status-publish","has-post-thumbnail"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Microlearning en Tecnolog\u00eda y Programaci\u00f3n | Tecsify Blog<\/title>\n<meta name=\"description\" content=\"Microlearning pr\u00e1ctico en tecnolog\u00eda: infograf\u00edas visuales y ejercicios de programaci\u00f3n pensados para aprender en minutos, conectar ideas y profundizar cuando lo necesites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tecsify.com\/blog\/microlearning\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Microlearning en Tecnolog\u00eda y Programaci\u00f3n | Tecsify Blog\" \/>\n<meta property=\"og:description\" content=\"Microlearning pr\u00e1ctico en tecnolog\u00eda: infograf\u00edas visuales y ejercicios de programaci\u00f3n pensados para aprender en minutos, conectar ideas y profundizar cuando lo necesites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tecsify.com\/blog\/microlearning\/\" \/>\n<meta property=\"og:site_name\" content=\"Tecsify Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Tecsify\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-21T20:38:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tecsify.com\/blog\/wp-content\/uploads\/2026\/01\/25c571f4-372b-49d6-8c96-c77aece8ce5e-6-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@tecsify\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/microlearning\\\/\",\"url\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/microlearning\\\/\",\"name\":\"Microlearning en Tecnolog\u00eda y Programaci\u00f3n | Tecsify Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/microlearning\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/microlearning\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/25c571f4-372b-49d6-8c96-c77aece8ce5e-6-1.jpg\",\"datePublished\":\"2026-01-16T02:14:31+00:00\",\"dateModified\":\"2026-01-21T20:38:10+00:00\",\"description\":\"Microlearning pr\u00e1ctico en tecnolog\u00eda: infograf\u00edas visuales y ejercicios de programaci\u00f3n pensados para aprender en minutos, conectar ideas y profundizar cuando lo necesites.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/microlearning\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tecsify.com\\\/blog\\\/microlearning\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/microlearning\\\/#primaryimage\",\"url\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/25c571f4-372b-49d6-8c96-c77aece8ce5e-6-1.jpg\",\"contentUrl\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/25c571f4-372b-49d6-8c96-c77aece8ce5e-6-1.jpg\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/microlearning\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Microlearning en Tecnolog\u00eda y Programaci\u00f3n\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/\",\"name\":\"Tecsify Blog\",\"description\":\"Tecnolog\u00eda, IA y Desarrollo de Software\",\"publisher\":{\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/#organization\"},\"alternateName\":\"Tecsify Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/#organization\",\"name\":\"Tecsify\",\"alternateName\":\"Tecsify Blog\",\"url\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/bluenew.png\",\"contentUrl\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/bluenew.png\",\"width\":830,\"height\":443,\"caption\":\"Tecsify\"},\"image\":{\"@id\":\"https:\\\/\\\/tecsify.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Tecsify\",\"https:\\\/\\\/x.com\\\/tecsify\",\"https:\\\/\\\/www.instagram.com\\\/tecsify\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCalG-fWPHHWG-XTzhcCn0_A\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/tecsify\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Microlearning en Tecnolog\u00eda y Programaci\u00f3n | Tecsify Blog","description":"Microlearning pr\u00e1ctico en tecnolog\u00eda: infograf\u00edas visuales y ejercicios de programaci\u00f3n pensados para aprender en minutos, conectar ideas y profundizar cuando lo necesites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tecsify.com\/blog\/microlearning\/","og_locale":"es_ES","og_type":"article","og_title":"Microlearning en Tecnolog\u00eda y Programaci\u00f3n | Tecsify Blog","og_description":"Microlearning pr\u00e1ctico en tecnolog\u00eda: infograf\u00edas visuales y ejercicios de programaci\u00f3n pensados para aprender en minutos, conectar ideas y profundizar cuando lo necesites.","og_url":"https:\/\/tecsify.com\/blog\/microlearning\/","og_site_name":"Tecsify Blog","article_publisher":"https:\/\/www.facebook.com\/Tecsify","article_modified_time":"2026-01-21T20:38:10+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/tecsify.com\/blog\/wp-content\/uploads\/2026\/01\/25c571f4-372b-49d6-8c96-c77aece8ce5e-6-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@tecsify","twitter_misc":{"Est. reading time":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tecsify.com\/blog\/microlearning\/","url":"https:\/\/tecsify.com\/blog\/microlearning\/","name":"Microlearning en Tecnolog\u00eda y Programaci\u00f3n | Tecsify Blog","isPartOf":{"@id":"https:\/\/tecsify.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tecsify.com\/blog\/microlearning\/#primaryimage"},"image":{"@id":"https:\/\/tecsify.com\/blog\/microlearning\/#primaryimage"},"thumbnailUrl":"https:\/\/tecsify.com\/blog\/wp-content\/uploads\/2026\/01\/25c571f4-372b-49d6-8c96-c77aece8ce5e-6-1.jpg","datePublished":"2026-01-16T02:14:31+00:00","dateModified":"2026-01-21T20:38:10+00:00","description":"Microlearning pr\u00e1ctico en tecnolog\u00eda: infograf\u00edas visuales y ejercicios de programaci\u00f3n pensados para aprender en minutos, conectar ideas y profundizar cuando lo necesites.","breadcrumb":{"@id":"https:\/\/tecsify.com\/blog\/microlearning\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tecsify.com\/blog\/microlearning\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/tecsify.com\/blog\/microlearning\/#primaryimage","url":"https:\/\/tecsify.com\/blog\/wp-content\/uploads\/2026\/01\/25c571f4-372b-49d6-8c96-c77aece8ce5e-6-1.jpg","contentUrl":"https:\/\/tecsify.com\/blog\/wp-content\/uploads\/2026\/01\/25c571f4-372b-49d6-8c96-c77aece8ce5e-6-1.jpg","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/tecsify.com\/blog\/microlearning\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/tecsify.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Microlearning en Tecnolog\u00eda y Programaci\u00f3n"}]},{"@type":"WebSite","@id":"https:\/\/tecsify.com\/blog\/#website","url":"https:\/\/tecsify.com\/blog\/","name":"Tecsify Blog","description":"Tecnolog\u00eda, IA y Desarrollo de Software","publisher":{"@id":"https:\/\/tecsify.com\/blog\/#organization"},"alternateName":"Tecsify Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tecsify.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/tecsify.com\/blog\/#organization","name":"Tecsify","alternateName":"Tecsify Blog","url":"https:\/\/tecsify.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/tecsify.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/tecsify.com\/blog\/wp-content\/uploads\/2021\/05\/bluenew.png","contentUrl":"https:\/\/tecsify.com\/blog\/wp-content\/uploads\/2021\/05\/bluenew.png","width":830,"height":443,"caption":"Tecsify"},"image":{"@id":"https:\/\/tecsify.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Tecsify","https:\/\/x.com\/tecsify","https:\/\/www.instagram.com\/tecsify","https:\/\/www.youtube.com\/channel\/UCalG-fWPHHWG-XTzhcCn0_A\/","https:\/\/www.linkedin.com\/company\/tecsify\/"]}]}},"_links":{"self":[{"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/pages\/3936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/comments?post=3936"}],"version-history":[{"count":80,"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/pages\/3936\/revisions"}],"predecessor-version":[{"id":4681,"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/pages\/3936\/revisions\/4681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/media\/3956"}],"wp:attachment":[{"href":"https:\/\/tecsify.com\/blog\/wp-json\/wp\/v2\/media?parent=3936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}