{"product_id":"pack-curso-desarrollo-web","title":"🗃️Cursos para Desarrollo web🌎","description":"\u003c!-- ===========================\n Carbanak · Pack Desarrollo Web 2025 (ULTRA PRO)\n ✅ Bordes por curso (SOLO BORDE)\n ✅ 1 Carrusel 3D por cada curso (CSS-only)\n ✅ Marquesina PRO separada: 1 al inicio + 1 al final\n ✅ Fuentes un poco más grandes (mejor legibilidad)\n ✅ Sin bloque “Precios por país”\n ============================ --\u003e\n\u003cstyle\u003e\n  :root{\n    --cb-text:#0b1220;\n    --cb-muted:#344055;\n    --cb-card:rgba(15,23,42,.035);\n    --cb-stroke:rgba(15,23,42,.10);\n    --cb-chip:rgba(15,23,42,.05);\n    --cb-accent:#7c5cff;\n    --cb-accent-2:#19d4ff;\n    --cb-shadow:0 10px 28px rgba(11,18,32,.10);\n\n    \/* colores por curso (SOLO BORDE) *\/\n    --b-html:#ff7a18;\n    --b-css:#2f7cff;\n    --b-js:#f7df1e;\n    --b-ai:#7c5cff;\n  }\n\n  .cb-wrap{\n    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n    color:var(--cb-text);\n    background:\n      radial-gradient(900px 480px at 90% -10%, rgba(25,212,255,.06), transparent 60%),\n      radial-gradient(800px 460px at -10% -20%, rgba(124,92,255,.07), transparent 55%),\n      linear-gradient(180deg, #ffffff, #fbfbfe);\n    border:1px solid var(--cb-stroke);\n    border-radius:18px;\n    padding:22px;\n    box-shadow: var(--cb-shadow);\n  }\n\n  \/* ====== SOLO LEGIBILIDAD + ORDEN (sin tocar carruseles) ====== *\/\n  .cb-sub,\n  .cb-acc-body,\n  .cb-faqs p{\n    max-width: 980px;\n    margin-left:auto;\n    margin-right:auto;\n  }\n  .cb-sub{ line-height:1.62; }\n  .cb-acc-body{ line-height:1.62; }\n  .cb-faqs p{ line-height:1.65; }\n\n  .cb-card h3, .cb-card h2{ letter-spacing:.1px; }\n\n  @media (max-width:520px){\n    .cb-wrap{ padding:16px; }\n    .cb-card{ padding:14px; }\n    .cb-badges{ gap:8px; }\n  }\n\n  \/* header *\/\n  .cb-title{\n    margin:0 0 8px;\n    font-weight:950;\n    letter-spacing:.2px;\n    font-size:clamp(1.75rem, 3.6vw, 2.45rem);\n    text-align:center;\n    background:linear-gradient(90deg,var(--cb-accent),var(--cb-accent-2));\n    -webkit-background-clip:text;background-clip:text;color:transparent;\n  }\n  .cb-sub{\n    margin:0 0 14px;\n    text-align:center;\n    color:var(--cb-muted);\n    font-size:clamp(1.06rem, 2.6vw, 1.22rem);\n    font-weight:650;\n  }\n\n  \/* chips *\/\n  .cb-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; justify-content:center }\n  .cb-badge{\n    border:1px solid var(--cb-stroke);\n    border-radius:999px;\n    padding:9px 13px;\n    background:var(--cb-chip);\n    font-weight:850;\n    font-size:clamp(1rem, 2.2vw, 1.08rem);\n  }\n\n  \/* base card *\/\n  .cb-card{\n    background:var(--cb-card);\n    border:1px solid var(--cb-stroke);\n    border-radius:16px;\n    padding:16px;\n    margin-top:16px;\n    box-shadow:0 6px 18px rgba(0,0,0,.05);\n  }\n\n  \/* CURSO (borde SOLO color del curso) *\/\n  .cb-course{\n    display:grid; gap:12px;\n    border:2px solid var(--cb-border) !important;  \/* SOLO bordes *\/\n    background: rgba(255,255,255,.68);\n    position: relative;\n    overflow:hidden;\n  }\n  .cb-course::before{\n    content:\"\";\n    position:absolute; inset:-40px -40px auto auto;\n    width:240px; height:240px; border-radius:50%;\n    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.0), transparent 60%);\n    pointer-events:none;\n  }\n  .cb-course h2, .cb-course h3{\n    margin:2px 0 8px;\n    font-size:clamp(1.3rem, 2.85vw, 1.62rem);\n    font-weight:950;\n    color:#0b1220;\n    text-align:left;\n  }\n  .cb-meta{\n    color:var(--cb-muted);\n    font-size:clamp(1.02rem, 2.3vw, 1.12rem);\n    margin-bottom:6px;\n    font-weight:750;\n  }\n\n  \/* etiqueta mini arriba (solo visual) *\/\n  .cb-chipTop{\n    display:flex; gap:10px; flex-wrap:wrap; align-items:center;\n    margin-top:2px;\n  }\n  .cb-pill{\n    display:inline-flex; align-items:center; gap:10px;\n    padding:8px 12px;\n    border-radius:999px;\n    border:1px solid rgba(15,23,42,.12);\n    background:rgba(15,23,42,.04);\n    font-weight:900;\n    font-size: 0.98rem;\n  }\n  .cb-pill i{\n    width:10px;height:10px;border-radius:999px; display:inline-block;\n    background: var(--cb-border);\n    box-shadow: 0 0 0 6px rgba(0,0,0,.04);\n  }\n\n  \/* player *\/\n  .cb-player{ position:relative; aspect-ratio:16\/9; border-radius:14px; overflow:hidden; background:#000; border:1px solid rgba(15,23,42,.10) }\n  .cb-player video{ width:100%; height:100%; object-fit:cover; display:block; background:#000 }\n\n  \/* bullets *\/\n  .cb-bullets{ display:grid; gap:10px; margin:12px 0 0; padding:0 }\n  .cb-bullets li{\n    list-style:none;\n    background:var(--cb-chip);\n    border:1px solid rgba(15,23,42,.10);\n    padding:13px 15px;\n    border-radius:12px;\n    font-size:clamp(1.06rem, 2.35vw, 1.14rem);\n    font-weight:650;\n    line-height:1.5;\n  }\n\n  \/* acordeón *\/\n  .cb-acc{ margin-top:12px; display:grid; gap:10px }\n  details.cb-acc-item{\n    background:var(--cb-chip);\n    border:1px solid rgba(15,23,42,.10);\n    border-radius:12px;\n    padding:10px 12px;\n  }\n  summary.cb-acc-sum{\n    list-style:none; cursor:pointer; font-weight:950;\n    font-size:clamp(1.08rem, 2.45vw, 1.18rem);\n    display:flex; align-items:center; gap:10px;\n  }\n  summary.cb-acc-sum::marker{ display:none }\n  summary.cb-acc-sum::after{ content:\"▾\"; margin-left:auto; opacity:.6; transition:transform .25s ease; }\n  details[open] \u003e summary.cb-acc-sum::after{ transform:rotate(-180deg) }\n  .cb-acc-body{ color:var(--cb-muted); margin-top:10px; font-size:clamp(1.03rem, 2.35vw, 1.12rem) }\n  .cb-acc-body ul{ margin:8px 0 0 18px }\n  .cb-acc-body li{ margin:4px 0 }\n\n  \/* ============ MARQUESINA PRO (DOBLE TRACK + MASK) ============ *\/\n  .cb-marqueePro{\n    position:relative;\n    overflow:hidden;\n    border:1px solid rgba(15,23,42,.10);\n    border-radius:14px;\n    background:linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));\n    margin-top:14px;\n  }\n  .cb-marqueePro::before{\n    content:\"\";\n    position:absolute; inset:0;\n    pointer-events:none;\n    background:\n      radial-gradient(600px 180px at 10% 20%, rgba(124,92,255,.10), transparent 60%),\n      radial-gradient(520px 200px at 90% 60%, rgba(25,212,255,.10), transparent 60%);\n  }\n  .cb-trackPro{\n    position:relative;\n    display:flex;\n    flex-direction:column;\n    gap:8px;\n    padding:10px 0;\n    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);\n    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);\n  }\n  .cb-row{\n    display:inline-flex; gap:18px; white-space:nowrap; will-change:transform;\n    font-weight:950; letter-spacing:.2px;\n    font-size:clamp(1.05rem, 2.4vw, 1.14rem);\n    color:rgba(11,18,32,.86);\n  }\n  .cb-row span{\n    display:inline-flex; align-items:center; gap:10px;\n    padding:8px 14px;\n    border-radius:999px;\n    border:1px solid rgba(15,23,42,.10);\n    background:rgba(255,255,255,.60);\n  }\n  .cb-row span i{\n    width:10px;height:10px;border-radius:999px; display:inline-block;\n    background:linear-gradient(90deg,var(--cb-accent),var(--cb-accent-2));\n    box-shadow: 0 0 0 6px rgba(124,92,255,.10);\n  }\n  .cb-row--a{ animation: cb-moveA 18s linear infinite; }\n  .cb-row--b{ animation: cb-moveB 22s linear infinite; opacity:.92; }\n  .cb-marqueePro:hover .cb-row{ animation-play-state:paused; }\n  @keyframes cb-moveA{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }\n  @keyframes cb-moveB{ from{ transform:translateX(-10%) } to{ transform:translateX(-60%) } }\n\n  \/* ============ CARRUSEL 3D POR CURSO (CSS-only) ============ *\/\n  .cb-3dCourse{\n    margin-top:12px;\n    border:1px solid rgba(15,23,42,.10);\n    border-radius:14px;\n    background: rgba(255,255,255,.70);\n    padding:14px;\n  }\n  .cb-3dHead{\n    display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center;\n    margin-bottom:10px;\n  }\n  .cb-3dHead b{ font-weight:950; font-size:clamp(1.02rem, 2.3vw, 1.16rem); }\n  .cb-3dHead small{ color:var(--cb-muted); font-weight:850; }\n\n  .cb-3d{\n    --w: 310px;\n    --h: 190px;\n    --z: 320px;\n    --dur: 14s;\n    perspective: 1100px;\n    display:grid;\n    place-items:center;\n    padding: 4px 0 8px;\n  }\n  @media (max-width:520px){\n    .cb-3d{ --w: 270px; --h: 185px; --z: 280px; }\n  }\n\n  .cb-ring{\n    width:var(--w);\n    height:var(--h);\n    position:relative;\n    transform-style:preserve-3d;\n    animation: cb-spin var(--dur) linear infinite;\n  }\n  .cb-3d:hover .cb-ring{ animation-play-state:paused; }\n  @keyframes cb-spin{ from{ transform:rotateY(0deg) } to{ transform:rotateY(360deg) } }\n\n  .cb-slide{\n    position:absolute; inset:0;\n    border-radius:16px;\n    border:1px solid rgba(15,23,42,.10);\n    background: rgba(255,255,255,.80);\n    box-shadow:0 14px 40px rgba(11,18,32,.12);\n    padding:14px;\n    display:flex; flex-direction:column; justify-content:space-between;\n    transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--z));\n    backface-visibility:hidden;\n    overflow:hidden;\n  }\n  .cb-slide::before{\n    content:\"\";\n    position:absolute; inset:-70px -70px auto auto;\n    width:240px;height:240px;border-radius:50%;\n    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0), transparent 60%);\n    opacity:.6;\n    pointer-events:none;\n  }\n\n  .cb-sTop{ display:flex; justify-content:space-between; gap:10px; position:relative; }\n  .cb-sIcon{\n    width:44px;height:44px;border-radius:14px;\n    display:grid; place-items:center;\n    font-weight:950; color:#0b1220;\n    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));\n    border:2px solid var(--cb-border); \/* SOLO borde color *\/\n  }\n  .cb-sTag{\n    font-weight:950; font-size:.9rem;\n    padding:8px 10px;border-radius:999px;\n    background:rgba(15,23,42,.05);\n    border:1px solid rgba(15,23,42,.10);\n    position:relative;\n  }\n  .cb-slide h4{ margin:12px 0 6px; font-size:1.05rem; font-weight:950; position:relative; }\n  .cb-slide p{ margin:0; color:rgba(11,18,32,.72); line-height:1.45; font-weight:650; font-size:.95rem; position:relative; }\n\n  .cb-sBottom{\n    margin-top:10px;\n    display:flex; justify-content:space-between; align-items:center;\n    color:rgba(11,18,32,.62); font-weight:900; font-size:.9rem;\n    position:relative;\n  }\n  .cb-dot{\n    width:10px;height:10px;border-radius:999px; display:inline-block; margin-right:8px;\n    background: var(--cb-border);\n    box-shadow: 0 0 0 6px rgba(0,0,0,.04);\n  }\n\n  \/* FAQs *\/\n  .cb-faqs{ display:grid; gap:10px; margin-top:12px }\n  .cb-faqs details{\n    background:var(--cb-chip);\n    border:1px solid rgba(15,23,42,.10);\n    border-radius:12px; padding:10px 12px;\n  }\n  .cb-faqs summary{\n    cursor:pointer; font-weight:950;\n    font-size:clamp(1.08rem, 2.45vw, 1.18rem);\n    display:flex; align-items:center; gap:10px;\n  }\n  .cb-faqs summary::after{ content:\"▾\"; margin-left:auto; opacity:.6; transition:transform .25s ease }\n  .cb-faqs details[open] \u003e summary::after{ transform:rotate(-180deg) }\n  .cb-faqs p{\n    color:var(--cb-muted);\n    margin:10px 0 2px;\n    font-size:clamp(1.05rem, 2.35vw, 1.14rem);\n    line-height:1.65;\n  }\n\u003c\/style\u003e\n\n\u003cdiv class=\"cb-wrap\"\u003e\n  \u003ch1 class=\"cb-title\"\u003ePack Desarrollo Web 2025 · 4 Cursos Diferentes ✅\u003c\/h1\u003e\n\n  \u003cp class=\"cb-sub\"\u003e\n    Aprende \u003cb\u003eHTML\u003c\/b\u003e, \u003cb\u003eCSS\u003c\/b\u003e, \u003cb\u003eJavaScript\u003c\/b\u003e y el \u003cb\u003eBono: Web con ChatGPT\u003c\/b\u003e en un solo pack.\n    Diseñado para ir \u003cb\u003ede cero a un portafolio\u003c\/b\u003e con bases sólidas, diseño responsive y programación real.\n  \u003c\/p\u003e\n\n  \u003c!-- Marquesina #1 (INICIO) --\u003e\n  \u003cdiv aria-label=\"Cursos incluidos\" class=\"cb-marqueePro\"\u003e\n    \u003cdiv class=\"cb-trackPro\"\u003e\n      \u003cdiv class=\"cb-row cb-row--a\"\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e📘 Curso 1: HTML (Estructura + SEO + Accesibilidad)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🎨 Curso 2: CSS (Flexbox + Grid + Responsive)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e⚙️ Curso 3: JavaScript (Lógica + POO + Async)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🤖 Curso 4: Web con ChatGPT (Crea y publica rápido)\u003c\/span\u003e\n\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e📘 Curso 1: HTML (Estructura + SEO + Accesibilidad)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🎨 Curso 2: CSS (Flexbox + Grid + Responsive)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e⚙️ Curso 3: JavaScript (Lógica + POO + Async)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🤖 Curso 4: Web con ChatGPT (Crea y publica rápido)\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Badges --\u003e\n  \u003cdiv class=\"cb-badges\"\u003e\n    \u003cspan class=\"cb-badge\"\u003e🔒 Pago 100% seguro\u003c\/span\u003e\n    \u003cspan class=\"cb-badge\"\u003e🛡️ Garantía de satisfacción\u003c\/span\u003e\n    \u003cspan class=\"cb-badge\"\u003e📚 Acceso 1 año\u003c\/span\u003e\n    \u003cspan class=\"cb-badge\"\u003e🧑‍💻 Soporte técnico\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Resumen claro --\u003e\n  \u003cdiv class=\"cb-card\" style=\"margin-top:14px;\"\u003e\n    \u003ch3 style=\"margin:0 0 8px; font-size:clamp(1.25rem,2.8vw,1.5rem); font-weight:950;\"\u003e\n      ✅ ¿Qué vas a lograr con este pack?\n    \u003c\/h3\u003e\n    \u003cdiv class=\"cb-acc-body\" style=\"margin-top:8px;\"\u003e\n      \u003cul style=\"margin:0 0 0 18px;\"\u003e\n        \u003cli\u003e\n\u003cb\u003eCrear páginas reales\u003c\/b\u003e con estructura profesional (HTML semántico + accesibilidad).\u003c\/li\u003e\n        \u003cli\u003e\n\u003cb\u003eDiseñar responsive\u003c\/b\u003e con Flexbox\/Grid y estilos modernos (CSS real para producción).\u003c\/li\u003e\n        \u003cli\u003e\n\u003cb\u003eProgramar con JavaScript\u003c\/b\u003e: lógica, POO, asincronía y consumo de APIs.\u003c\/li\u003e\n        \u003cli\u003e\n\u003cb\u003ePublicar tu web\u003c\/b\u003e y mejorarla rápido con el bono de ChatGPT.\u003c\/li\u003e\n      \u003c\/ul\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- =======================\n       CURSO 1: HTML (borde naranja)\n       ======================= --\u003e\n  \u003cdiv style=\"--cb-border: var(--b-html);\" class=\"cb-card cb-course\" id=\"curso-html\"\u003e\n    \u003cdiv class=\"cb-chipTop\"\u003e\n      \u003cspan class=\"cb-pill\"\u003e\u003ci\u003e\u003c\/i\u003e📘 Curso 1 · HTML\u003c\/span\u003e\n      \u003cspan class=\"cb-pill\"\u003e✅ Estructura + SEO + Accesibilidad\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch2\u003e📘 HTML — 22 clases · 3h de vídeo · +12h de práctica\u003c\/h2\u003e\n    \u003cp class=\"cb-meta\"\u003eDe Básico a Avanzado · Actualizado 2025 · ⭐ 4.8\u003c\/p\u003e\n\n    \u003cdiv class=\"cb-player\"\u003e\n      \u003cvideo controls playsinline preload=\"metadata\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/00e1b998ee1d4591a9862535fdc45a9e.mov\"\u003e\u003c\/video\u003e\n    \u003c\/div\u003e\n\n    \u003cul class=\"cb-bullets\"\u003e\n      \u003cli\u003e✅ HTML5 semántico, accesibilidad (ARIA), SEO y formularios profesionales.\u003c\/li\u003e\n      \u003cli\u003e✅ Multimedia, tablas, metaetiquetas e imágenes responsivas (carga eficiente).\u003c\/li\u003e\n      \u003cli\u003e🏁 Proyecto final: portafolio con estructura limpia y optimizada.\u003c\/li\u003e\n    \u003c\/ul\u003e\n\n    \u003c!-- Carrusel 3D HTML --\u003e\n    \u003cdiv class=\"cb-3dCourse\"\u003e\n      \u003cdiv class=\"cb-3dHead\"\u003e\n        \u003cb\u003e🧱 Carrusel 3D · HTML (módulos)\u003c\/b\u003e\n        \u003csmall\u003ePausa al pasar el mouse o tocar ✋\u003c\/small\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"cb-3d\"\u003e\n        \u003cdiv class=\"cb-ring\"\u003e\n          \u003cdiv class=\"cb-slide\" style=\"--i:0;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eH5\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eSemántica\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eEstructuras limpias\u003c\/h4\u003e\n            \u003cp\u003eHeader, main, nav, section, article y footer bien organizados.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eBase\u003c\/span\u003e\u003cspan\u003e✅\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:1;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eSEO\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eMeta\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eSEO on-page\u003c\/h4\u003e\n            \u003cp\u003eJerarquía correcta y metaetiquetas que ayudan a posicionar.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eVisibilidad\u003c\/span\u003e\u003cspan\u003e🔎\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:2;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eA11Y\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eARIA\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eAccesibilidad\u003c\/h4\u003e\n            \u003cp\u003eEstructura pensada para usuarios reales en cualquier dispositivo.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003ePro\u003c\/span\u003e\u003cspan\u003e♿\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:3;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eFRM\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eForms\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eFormularios fuertes\u003c\/h4\u003e\n            \u003cp\u003eInputs, validaciones y estructura correcta sin errores comunes.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eListo\u003c\/span\u003e\u003cspan\u003e🧾\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:4;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eIMG\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eMedia\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eMultimedia e imágenes\u003c\/h4\u003e\n            \u003cp\u003esrcset, optimización, audio\/video y carga eficiente.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eRápido\u003c\/span\u003e\u003cspan\u003e⚡\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:5;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e🏁\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eProyecto\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003ePortafolio final\u003c\/h4\u003e\n            \u003cp\u003eHTML semántico + SEO listo para mostrar y seguir creciendo.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eEntrega\u003c\/span\u003e\u003cspan\u003e🎯\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"cb-acc\"\u003e\n      \u003cdetails class=\"cb-acc-item\" open\u003e\n        \u003csummary class=\"cb-acc-sum\"\u003eMódulos del curso\u003c\/summary\u003e\n        \u003cdiv class=\"cb-acc-body\"\u003e\n          \u003cul\u003e\n            \u003cli\u003eSemántica + jerarquía + estructura limpia.\u003c\/li\u003e\n            \u003cli\u003eFormularios avanzados + accesibilidad (ARIA).\u003c\/li\u003e\n            \u003cli\u003eImágenes responsivas + multimedia + SEO on-page.\u003c\/li\u003e\n          \u003c\/ul\u003e\n        \u003c\/div\u003e\n      \u003c\/details\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- =======================\n       CURSO 2: CSS (borde azul)\n       ======================= --\u003e\n  \u003cdiv style=\"--cb-border: var(--b-css);\" class=\"cb-card cb-course\" id=\"curso-css\"\u003e\n    \u003cdiv class=\"cb-chipTop\"\u003e\n      \u003cspan class=\"cb-pill\"\u003e\u003ci\u003e\u003c\/i\u003e🎨 Curso 2 · CSS\u003c\/span\u003e\n      \u003cspan class=\"cb-pill\"\u003e✅ Flexbox + Grid + Responsive\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch2\u003e🎨 CSS — 37 clases · 6h de vídeo · +12h de práctica\u003c\/h2\u003e\n    \u003cp class=\"cb-meta\"\u003eDe Básico a Avanzado · Actualizado 2025 · ⭐ 4.8\u003c\/p\u003e\n\n    \u003cdiv class=\"cb-player\"\u003e\n      \u003cvideo controls playsinline preload=\"metadata\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/6f96965f4dfc48dca6a0a7a488940538.mov\"\u003e\u003c\/video\u003e\n    \u003c\/div\u003e\n\n    \u003cul class=\"cb-bullets\"\u003e\n      \u003cli\u003e✅ Tipografía, color, variables, degradados, sombras y bordes.\u003c\/li\u003e\n      \u003cli\u003e✅ Flexbox + Grid, Mobile First, media queries y responsive real.\u003c\/li\u003e\n      \u003cli\u003e🏁 Proyecto final: portafolio con HTML + CSS listo para producción.\u003c\/li\u003e\n    \u003c\/ul\u003e\n\n    \u003c!-- Carrusel 3D CSS --\u003e\n    \u003cdiv class=\"cb-3dCourse\"\u003e\n      \u003cdiv class=\"cb-3dHead\"\u003e\n        \u003cb\u003e🎨 Carrusel 3D · CSS (módulos)\u003c\/b\u003e\n        \u003csmall\u003ePausa al pasar el mouse o tocar ✋\u003c\/small\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"cb-3d\"\u003e\n        \u003cdiv class=\"cb-ring\"\u003e\n          \u003cdiv class=\"cb-slide\" style=\"--i:0;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eSEL\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eSelectores\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eBase sólida\u003c\/h4\u003e\n            \u003cp\u003eEspecificidad, pseudo-clases\/elementos y Box Model.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eFundamentos\u003c\/span\u003e\u003cspan\u003e✅\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:1;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eBEM\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eOrden\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eCSS escalable\u003c\/h4\u003e\n            \u003cp\u003eOrganización y buenas prácticas para proyectos limpios.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eLimpio\u003c\/span\u003e\u003cspan\u003e🧼\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:2;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eGRID\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eLayout\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eFlexbox + Grid\u003c\/h4\u003e\n            \u003cp\u003eDiseños modernos con estructura profesional.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003ePro\u003c\/span\u003e\u003cspan\u003e🏗️\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:3;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e📱\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eResponsive\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eMóvil primero\u003c\/h4\u003e\n            \u003cp\u003eDiseño fluido para verse perfecto en cualquier pantalla.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eAdaptable\u003c\/span\u003e\u003cspan\u003e📱\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:4;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eFX\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eUI\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eInteracciones\u003c\/h4\u003e\n            \u003cp\u003eTransiciones, transformaciones y animaciones para UI viva.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eWow\u003c\/span\u003e\u003cspan\u003e✨\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:5;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e🏁\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eProyecto\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003ePortafolio final\u003c\/h4\u003e\n            \u003cp\u003eHTML + CSS completo, listo para producción y mostrar.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eEntrega\u003c\/span\u003e\u003cspan\u003e🎯\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"cb-acc\"\u003e\n      \u003cdetails class=\"cb-acc-item\" open\u003e\n        \u003csummary class=\"cb-acc-sum\"\u003eMódulos del curso\u003c\/summary\u003e\n        \u003cdiv class=\"cb-acc-body\"\u003e\n          \u003cul\u003e\n            \u003cli\u003eSelectores, especificidad, Box Model, Position y buenas prácticas.\u003c\/li\u003e\n            \u003cli\u003eFlexbox\/Grid avanzado + responsive + animaciones.\u003c\/li\u003e\n          \u003c\/ul\u003e\n        \u003c\/div\u003e\n      \u003c\/details\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- =======================\n       CURSO 3: JavaScript (borde amarillo)\n       ======================= --\u003e\n  \u003cdiv style=\"--cb-border: var(--b-js);\" class=\"cb-card cb-course\" id=\"curso-js\"\u003e\n    \u003cdiv class=\"cb-chipTop\"\u003e\n      \u003cspan class=\"cb-pill\"\u003e\u003ci\u003e\u003c\/i\u003e⚙️ Curso 3 · JavaScript\u003c\/span\u003e\n      \u003cspan class=\"cb-pill\"\u003e✅ Lógica + POO + Asíncrono\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch2\u003e⚙️ JavaScript — 55 clases · 7h de vídeo · +12h de práctica\u003c\/h2\u003e\n    \u003cp class=\"cb-meta\"\u003eDe Básico a Avanzado · ⭐ 4.7 (554 opiniones) · Publicado 18\/07\/2024\u003c\/p\u003e\n\n    \u003cdiv class=\"cb-player\"\u003e\n      \u003cvideo controls playsinline preload=\"metadata\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/3a07e579f4bf44d8a58e52227d68fa29.mp4\"\u003e\u003c\/video\u003e\n    \u003c\/div\u003e\n\n    \u003cul class=\"cb-bullets\"\u003e\n      \u003cli\u003e✅ Variables, tipos, strings, números y conversiones.\u003c\/li\u003e\n      \u003cli\u003e✅ Condicionales, bucles, funciones, scope y closures.\u003c\/li\u003e\n      \u003cli\u003e✅ Arrays: map, filter, reduce, find, slice y spread.\u003c\/li\u003e\n      \u003cli\u003e✅ POO: objetos, prototipos, clases, herencia y \u003cb\u003ethis\u003c\/b\u003e.\u003c\/li\u003e\n      \u003cli\u003e✅ Asincronía: promesas, async\/await, Fetch + DOM.\u003c\/li\u003e\n    \u003c\/ul\u003e\n\n    \u003c!-- Carrusel 3D JS --\u003e\n    \u003cdiv class=\"cb-3dCourse\"\u003e\n      \u003cdiv class=\"cb-3dHead\"\u003e\n        \u003cb\u003e⚡ Carrusel 3D · JavaScript (módulos)\u003c\/b\u003e\n        \u003csmall\u003ePausa al pasar el mouse o tocar ✋\u003c\/small\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"cb-3d\"\u003e\n        \u003cdiv class=\"cb-ring\"\u003e\n          \u003cdiv class=\"cb-slide\" style=\"--i:0;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eVAR\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eFundamentos\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eVariables y tipos\u003c\/h4\u003e\n            \u003cp\u003eBuenas prácticas desde cero con ejemplos reales.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eBase\u003c\/span\u003e\u003cspan\u003e✅\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:1;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eIF\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eLógica\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eControl de flujo\u003c\/h4\u003e\n            \u003cp\u003eIF\/ELSE, switch y loops para pensar como programador.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eLógica\u003c\/span\u003e\u003cspan\u003e🧠\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:2;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eFN\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eFunciones\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eScope y closures\u003c\/h4\u003e\n            \u003cp\u003eArrow functions, this y closures sin confusión.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eLimpio\u003c\/span\u003e\u003cspan\u003e✨\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:3;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eARR\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eArrays\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eMétodos clave\u003c\/h4\u003e\n            \u003cp\u003emap, filter, reduce y más con práctica real.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003ePro\u003c\/span\u003e\u003cspan\u003e🚀\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:4;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003ePOO\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eObjetos\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003ePOO en JavaScript\u003c\/h4\u003e\n            \u003cp\u003eClases, prototipos, herencia y estructuras modernas de código.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eEstructura\u003c\/span\u003e\u003cspan\u003e🏗️\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:5;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003eAPI\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eAsync\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eAsync + Fetch + DOM\u003c\/h4\u003e\n            \u003cp\u003ePromesas, async\/await y consumo de APIs (GET\/POST\/DELETE).\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eReal\u003c\/span\u003e\u003cspan\u003e⚡\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"cb-acc\"\u003e\n      \u003cdetails class=\"cb-acc-item\" open\u003e\n        \u003csummary class=\"cb-acc-sum\"\u003eMódulos del curso\u003c\/summary\u003e\n        \u003cdiv class=\"cb-acc-body\"\u003e\n          \u003cul\u003e\n            \u003cli\u003eFundamentos + lógica + control de flujo.\u003c\/li\u003e\n            \u003cli\u003eFunciones, métodos, closures y this.\u003c\/li\u003e\n            \u003cli\u003ePOO + HTTP + Async\/Await + DOM.\u003c\/li\u003e\n          \u003c\/ul\u003e\n        \u003c\/div\u003e\n      \u003c\/details\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- =======================\n       CURSO 4: ChatGPT (borde morado)\n       ======================= --\u003e\n  \u003cdiv style=\"--cb-border: var(--b-ai);\" class=\"cb-card cb-course\" id=\"curso-chatgpt\"\u003e\n    \u003cdiv class=\"cb-chipTop\"\u003e\n      \u003cspan class=\"cb-pill\"\u003e\u003ci\u003e\u003c\/i\u003e🤖 Curso 4 · Web con ChatGPT\u003c\/span\u003e\n      \u003cspan class=\"cb-pill\"\u003e✅ Genera + publica + mejora con IA\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch3\u003e🤖 Web con ChatGPT — 9 clases · 1h de vídeo · +8h de práctica\u003c\/h3\u003e\n    \u003cp class=\"cb-meta\"\u003eDe Básico a Avanzado · ⭐ 4.7\u003c\/p\u003e\n\n    \u003cdiv class=\"cb-player\"\u003e\n      \u003cvideo controls playsinline preload=\"metadata\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/713826cf7dca402aacdde23012c70793.mov\"\u003e\u003c\/video\u003e\n    \u003c\/div\u003e\n\n    \u003cul class=\"cb-bullets\"\u003e\n      \u003cli\u003e✅ Genera una web completa y edítala en VS Code paso a paso.\u003c\/li\u003e\n      \u003cli\u003e✅ Botón a WhatsApp con JS + mejoras visuales con IA.\u003c\/li\u003e\n      \u003cli\u003e✅ Publica gratis en Netlify y aprende a actualizar rápido.\u003c\/li\u003e\n    \u003c\/ul\u003e\n\n    \u003c!-- Carrusel 3D ChatGPT --\u003e\n    \u003cdiv class=\"cb-3dCourse\"\u003e\n      \u003cdiv class=\"cb-3dHead\"\u003e\n        \u003cb\u003e🤖 Carrusel 3D · ChatGPT (módulos)\u003c\/b\u003e\n        \u003csmall\u003ePausa al pasar el mouse o tocar ✋\u003c\/small\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"cb-3d\"\u003e\n        \u003cdiv class=\"cb-ring\"\u003e\n          \u003cdiv class=\"cb-slide\" style=\"--i:0;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e🧠\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003ePrompts\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003ePrompts efectivos\u003c\/h4\u003e\n            \u003cp\u003eGenera secciones, estructura y componentes sin perder tiempo.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eRápido\u003c\/span\u003e\u003cspan\u003e⚡\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:1;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e🧩\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eWeb\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eWeb completa\u003c\/h4\u003e\n            \u003cp\u003eUna web funcional, moderna y editable desde VS Code.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eLista\u003c\/span\u003e\u003cspan\u003e✅\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:2;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e💬\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eWhatsApp\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eBotón a WhatsApp\u003c\/h4\u003e\n            \u003cp\u003eIntegra enlaces y botones con JavaScript para contacto o ventas.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eVenta\u003c\/span\u003e\u003cspan\u003e💬\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:3;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e🖼️\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eMedia\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eImágenes con IA\u003c\/h4\u003e\n            \u003cp\u003eOptimiza imágenes para que tu web cargue mejor y se vea pro.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003ePro\u003c\/span\u003e\u003cspan\u003e✨\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:4;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e🌐\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eNetlify\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003ePublicación gratuita\u003c\/h4\u003e\n            \u003cp\u003ePublica tu web y aprende a actualizarla sin complicarte.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eEn línea\u003c\/span\u003e\u003cspan\u003e🚀\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cb-slide\" style=\"--i:5;\"\u003e\n            \u003cdiv class=\"cb-sTop\"\u003e\n              \u003cdiv class=\"cb-sIcon\"\u003e🏁\u003c\/div\u003e\n              \u003cdiv class=\"cb-sTag\"\u003eResultado\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003ch4\u003eTu web lista\u003c\/h4\u003e\n            \u003cp\u003eUn sitio publicado y funcional, preparado para crecer.\u003c\/p\u003e\n            \u003cdiv class=\"cb-sBottom\"\u003e\n\u003cspan\u003e\u003cspan class=\"cb-dot\"\u003e\u003c\/span\u003eEntrega\u003c\/span\u003e\u003cspan\u003e🎯\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"cb-acc\"\u003e\n      \u003cdetails class=\"cb-acc-item\" open\u003e\n        \u003csummary class=\"cb-acc-sum\"\u003eMódulos del curso\u003c\/summary\u003e\n        \u003cdiv class=\"cb-acc-body\"\u003e\n          \u003cul\u003e\n            \u003cli\u003ePrompts + generación con IA.\u003c\/li\u003e\n            \u003cli\u003ePrimera web + WhatsApp con JS.\u003c\/li\u003e\n            \u003cli\u003ePublicación en Netlify + mejoras con IA.\u003c\/li\u003e\n          \u003c\/ul\u003e\n        \u003c\/div\u003e\n      \u003c\/details\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Marquesina #2 (FINAL) --\u003e\n  \u003cdiv aria-label=\"Beneficios del pack\" class=\"cb-marqueePro\" style=\"margin-top:18px;\"\u003e\n    \u003cdiv class=\"cb-trackPro\"\u003e\n      \u003cdiv class=\"cb-row cb-row--b\"\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🧩 4 cursos completos (no repetidos)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🏁 Proyectos reales para tu portafolio\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e📱 Responsive real (Mobile First)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🔗 Consumo de APIs + Fetch + DOM\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🚀 Publica tu web (Netlify) + mejoras rápidas\u003c\/span\u003e\n\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🧩 4 cursos completos (no repetidos)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🏁 Proyectos reales para tu portafolio\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e📱 Responsive real (Mobile First)\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🔗 Consumo de APIs + Fetch + DOM\u003c\/span\u003e\n        \u003cspan\u003e\u003ci\u003e\u003c\/i\u003e🚀 Publica tu web (Netlify) + mejoras rápidas\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- FAQs --\u003e\n  \u003cdiv class=\"cb-card\" style=\"margin-top:16px;\"\u003e\n    \u003ch3 style=\"margin:0 0 10px; font-size: clamp(1.35rem, 2.9vw, 1.7rem); font-weight: 950;\"\u003e\n      Preguntas frecuentes\n    \u003c\/h3\u003e\n\n    \u003cdiv class=\"cb-faqs\"\u003e\n      \u003cdetails open\u003e\n        \u003csummary\u003e¿Cuándo recibo el acceso?\u003c\/summary\u003e\n        \u003cp\u003eEl acceso llega a tu correo \u003cb\u003eautomáticamente\u003c\/b\u003e tras la confirmación del pago.\u003c\/p\u003e\n      \u003c\/details\u003e\n\n      \u003cdetails\u003e\n        \u003csummary\u003e¿Por cuánto tiempo tengo acceso?\u003c\/summary\u003e\n        \u003cp\u003eTienes \u003cb\u003e1 año\u003c\/b\u003e de acceso al aula virtual, materiales y actualizaciones.\u003c\/p\u003e\n      \u003c\/details\u003e\n\n      \u003cdetails\u003e\n        \u003csummary\u003e¿Incluye proyectos reales?\u003c\/summary\u003e\n        \u003cp\u003eSí. Construirás un portafolio con HTML\/CSS y ejercicios prácticos con JavaScript.\u003c\/p\u003e\n      \u003c\/details\u003e\n\n      \u003cdetails\u003e\n        \u003csummary\u003e¿El curso de ChatGPT viene incluido?\u003c\/summary\u003e\n        \u003cp\u003eSí, viene como \u003cb\u003ebono\u003c\/b\u003e para crear y publicar una web completa con IA.\u003c\/p\u003e\n      \u003c\/details\u003e\n\n      \u003cdetails\u003e\n        \u003csummary\u003e¿Es para principiantes?\u003c\/summary\u003e\n        \u003cp\u003eEstá pensado para empezar desde cero y avanzar paso a paso hasta nivel práctico.\u003c\/p\u003e\n      \u003c\/details\u003e\n\n      \u003cdetails\u003e\n        \u003csummary\u003e¿Cómo obtengo soporte?\u003c\/summary\u003e\n        \u003cp\u003eEscríbenos a WhatsApp \u003cb\u003e+51 975 658 072\u003c\/b\u003e y te ayudamos con dudas técnicas.\u003c\/p\u003e\n      \u003c\/details\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n","brand":"Carbanak","offers":[{"title":"Default Title","offer_id":42465804615742,"sku":null,"price":17.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0624\/4981\/1518\/files\/ChatGPTImage26oct2025_10_21_22p.m..png?v=1770246761","url":"https:\/\/elreydigital.online\/products\/pack-curso-desarrollo-web","provider":"👑BIG Market👑","version":"1.0","type":"link"}