{"id":229,"date":"2026-04-12T23:25:11","date_gmt":"2026-04-12T23:25:11","guid":{"rendered":"https:\/\/digitaline.com.co\/?page_id=229"},"modified":"2026-08-13T18:40:14","modified_gmt":"2026-08-13T18:40:14","slug":"portafolio","status":"publish","type":"page","link":"https:\/\/digitaline.com.co\/en\/portafolio\/","title":{"rendered":"portafolio"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<section class=\"portfolio-hero-section\" id=\"portafolio-hero\">\n    <div class=\"portfolio-hero-backdrop\"><\/div>\n\n    <div class=\"portfolio-hero-grid\">\n\n        <div class=\"portfolio-hero-copy reveal-block\">\n\n            <h1 class=\"hero-title\">\n                <span class=\"hero-script\">Ortodoncia Invisible<\/span>\n\n                <p class=\"hero-solid\">\n                    Del dise\u00f1o digital a la fabricaci\u00f3n de alineadores\n                <\/p>\n            <\/h1>\n\n            <p class=\"hero-lead\">\n                Impulsamos tu consulta con soporte tecnol\u00f3gico, cient\u00edfico y acad\u00e9mico continuo para garantizar resultados predecibles y exitosos.\n            <\/p>\n\n            <div class=\"hero-actions\">\n                <a href=\"#portafolio-certificacion\" class=\"hero-btn hero-btn-primary\">\n                    Ver certificaci\u00f3n\n                <\/a>\n\n                <a href=\"#portafolio-planificacion\" class=\"hero-btn hero-btn-secondary\">\n                    Ver planificaci\u00f3n\n                <\/a>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"portfolio-hero-visual reveal-block delay-2\" aria-hidden=\"true\">\n\n            <div class=\"visual-orbit orbit-a\"><\/div>\n            <div class=\"visual-orbit orbit-b\"><\/div>\n\n            <div class=\"hero-video-stage\">\n                <video class=\"hero-video\" autoplay muted loop playsinline preload=\"auto\">\n                    <source src=\"http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/04\/hero.mp4\" type=\"video\/mp4\">\n                <\/video>\n            <\/div>\n\n            <div class=\"hero-mini-stats\">\n\n                <div>\n                    <strong>Biomec\u00e1nica real<\/strong>\n                    <span>movimientos predecibles<\/span>\n                <\/div>\n\n                <div>\n                    <strong>100%<\/strong>\n                    <span>flujo digital<\/span>\n                <\/div>\n\n                <div>\n                    <strong>24\/7<\/strong>\n                    <span>soporte continuo<\/span>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n@font-face {\n    font-family: 'ParslayCustom';\n    src: url('https:\/\/digitaline.com.co\/wp-content\/uploads\/fonts\/parslay.otf') format('opentype');\n    font-display: swap;\n}\n\n.portfolio-hero-section {\n    position: relative;\n    overflow: hidden;\n    padding: 64px 60px;\n    margin-top: -5px !important;\n\n    background:\n        radial-gradient(circle at top right, rgba(139, 196, 63, 0.16), transparent 30%),\n        radial-gradient(circle at bottom left, rgba(101, 132, 138, 0.18), transparent 34%),\n        linear-gradient(135deg, #f5f8f7 0%, #efeeec 48%, #e8edeb 100%);\n\n    font-family: 'Montserrat', sans-serif;\n}\n\n.portfolio-hero-section::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n\n    background: linear-gradient(\n        to right,\n        rgba(101, 132, 138, 0.9) 0%,\n        rgba(101, 132, 138, 0.3) 60%,\n        transparent 100%\n    );\n\n    pointer-events: none;\n    z-index: 0;\n}\n\n.portfolio-hero-backdrop {\n    position: absolute;\n    inset: 0;\n\n    background-image:\n        linear-gradient(rgba(101, 132, 138, 0.045) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(101, 132, 138, 0.045) 1px, transparent 1px);\n\n    background-size: 34px 34px;\n\n    mask-image: linear-gradient(\n        to bottom,\n        rgba(0, 0, 0, 0.85),\n        transparent 90%\n    );\n\n    pointer-events: none;\n}\n\n.portfolio-hero-grid {\n    position: relative;\n    z-index: 1;\n\n    max-width: 1400px;\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns: 1.05fr 0.95fr;\n    align-items: center;\n\n    gap: 40px;\n}\n\n.portfolio-hero-copy {\n    max-width: 920px;\n}\n\n.reveal-block {\n    opacity: 0;\n    transform: translateY(24px);\n    animation: revealUp 0.9s ease forwards;\n}\n\n.delay-2 {\n    animation-delay: 0.18s;\n}\n\n@keyframes revealUp {\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.hero-title {\n    margin: 0;\n    color: #ffffff;\n    line-height: 1.1;\n}\n\n.hero-script {\n    display: block;\n    font-family: 'ParslayCustom', cursive;\n    font-size: 5rem;\n    color: #ffffff;\n    margin-bottom: 4px;\n    line-height: 1;\n}\n\n.hero-solid {\n    display: block;\n    font-size: 2.2rem;\n    font-weight: 800;\n    line-height: 1.15;\n    color: #ffffff;\n    max-width: 100%;\n}\n\n.hero-lead {\n    max-width: 620px;\n    margin: 22px 0 0;\n\n    color: rgba(255, 255, 255, 0.92);\n\n    font-size: 1.05rem;\n    line-height: 1.75;\n}\n\n.hero-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 14px;\n    margin-top: 30px;\n}\n\n.hero-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: 48px;\n    padding: 12px 35px;\n\n    border-radius: 4px;\n\n    text-decoration: none;\n    text-transform: uppercase;\n\n    letter-spacing: 1px;\n    font-size: 13px;\n    font-weight: 700;\n\n    border: 2px solid #8bc43f;\n    background: #8bc43f;\n    color: #ffffff;\n\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.hero-btn:hover {\n    background: transparent;\n    color: #8bc43f;\n    transform: translateY(-3px);\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n}\n\n.hero-btn-primary {\n    background: #8bc43f;\n    color: #ffffff;\n    border: 2px solid #8bc43f;\n}\n\n.hero-btn-secondary {\n    background: rgba(255, 255, 255, 0.08);\n    color: #ffffff;\n    border: 2px solid rgba(255, 255, 255, 0.55);\n}\n\n.hero-btn-secondary:hover {\n    background: transparent;\n    color: #ffffff;\n    border-color: #ffffff;\n}\n\n.portfolio-hero-visual {\n    position: relative;\n    min-height: 560px;\n\n    display: grid;\n    place-items: center;\n\n    perspective: 1600px;\n}\n\n.visual-orbit {\n    position: absolute;\n    inset: 10% 14%;\n\n    border-radius: 50%;\n    border: 1px solid rgba(101, 132, 138, 0.14);\n\n    filter: blur(0.2px);\n}\n\n.orbit-a {\n    transform: rotate(18deg);\n}\n\n.orbit-b {\n    inset: 17% 20%;\n    transform: rotate(-12deg);\n}\n\n.hero-video-stage {\n    position: relative;\n    width: min(560px, 98%);\n    aspect-ratio: 1 \/ 1;\n}\n\n.hero-video {\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    display: block;\n\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n\n    -webkit-mask-image: radial-gradient(\n        ellipse 68% 65% at 50% 52%,\n        rgba(0,0,0,1) 0%,\n        rgba(0,0,0,1) 40%,\n        rgba(0,0,0,0.85) 52%,\n        rgba(0,0,0,0.5) 62%,\n        rgba(0,0,0,0.1) 72%,\n        rgba(0,0,0,0) 78%\n    );\n\n    mask-image: radial-gradient(\n        ellipse 68% 65% at 50% 52%,\n        rgba(0,0,0,1) 0%,\n        rgba(0,0,0,1) 40%,\n        rgba(0,0,0,0.85) 52%,\n        rgba(0,0,0,0.5) 62%,\n        rgba(0,0,0,0.1) 72%,\n        rgba(0,0,0,0) 78%\n    );\n}\n\n.hero-mini-stats {\n    position: absolute;\n    inset: auto 0 10px;\n\n    display: flex;\n    justify-content: center;\n    gap: 14px;\n    flex-wrap: wrap;\n}\n\n.hero-mini-stats div {\n    min-width: 120px;\n    padding: 12px 16px;\n\n    border-radius: 18px;\n\n    background: rgba(0, 0, 0, 0.24);\n\n    border: 1px solid rgba(255, 255, 255, 0.22);\n\n    box-shadow: 0 14px 30px rgba(14, 29, 31, 0.08);\n\n    backdrop-filter: blur(10px);\n\n    text-align: center;\n}\n\n.hero-mini-stats strong {\n    display: block;\n    font-size: 1.05rem;\n    color: #ffffff;\n}\n\n.hero-mini-stats span {\n    display: block;\n    font-size: 0.77rem;\n\n    color: rgba(255, 255, 255, 0.86);\n\n    margin-top: 4px;\n\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n\n@media (max-width: 960px) {\n\n    .portfolio-hero-section {\n        padding: 52px 20px;\n    }\n\n    .portfolio-hero-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .portfolio-hero-visual {\n        min-height: 420px;\n    }\n\n    .hero-video-stage {\n        width: min(480px, 100%);\n    }\n\n    .hero-script {\n        font-size: 3.2rem;\n    }\n\n    .hero-solid {\n        font-size: 1.7rem;\n        max-width: none;\n    }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {});\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;700;800&amp;display=swap\" rel=\"stylesheet\">\n\n<section class=\"portfolio-cert-section\" id=\"portafolio-certificacion\">\n    <div class=\"cert-topo-wireframe\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"cert-inner\">\n        <div class=\"cert-copy\">\n\n            <!-- CAMBIO -->\n            <p class=\"cert-kicker\">Academia Digitaline<\/p>\n\n            <h2 class=\"cert-title\">\n                <span class=\"cert-title-solid\">Lidera la<\/span>\n                <span class=\"cert-title-script\">vanguardia<\/span>\n            <\/h2>\n\n            <!-- CAMBIO -->\n            <div class=\"cert-scroll-copy\" id=\"certScrollCopy\">\n                <p>\n                    La ortodoncia digital transform\u00f3 la manera de diagnosticar, planear y ejecutar tratamientos. F\u00f3rmate junto a expertos y desarrolla las habilidades cl\u00ednicas y digitales necesarias para dise\u00f1ar tratamientos de ortodoncia invisible con seguridad, precisi\u00f3n y autonom\u00eda.\n                <\/p>\n            <\/div>\n\n            <div class=\"learning-map reveal-panel\">\n                <div class=\"learning-map-header\">\n                    <span class=\"learning-map-kicker\">Ruta de aprendizaje<\/span>\n                <\/div>\n\n                <div class=\"learning-track\" id=\"learningTrack\">\n                    <div class=\"learning-track-line\"><\/div>\n                    <div class=\"learning-track-fill\" id=\"learningTrackFill\"><\/div>\n\n                    <!-- CAMBIO -->\n                    <div class=\"learning-step\" data-step=\"1\">\n                        <span class=\"step-node\">\n                            <span class=\"node-fill\"><\/span>\n                            <span class=\"node-number\">1<\/span>\n                        <\/span>\n                        <p>ABC de alineadores<\/p>\n                    <\/div>\n\n                    <!-- CAMBIO -->\n                    <div class=\"learning-step\" data-step=\"2\">\n                        <span class=\"step-node\">\n                            <span class=\"node-fill\"><\/span>\n                            <span class=\"node-number\">2<\/span>\n                        <\/span>\n                        <p>Biomec\u00e1nica aplicada a la ortodoncia invisible<\/p>\n                    <\/div>\n\n                    <!-- CAMBIO -->\n                    <div class=\"learning-step\" data-step=\"3\">\n                        <span class=\"step-node\">\n                            <span class=\"node-fill\"><\/span>\n                            <span class=\"node-number\">3<\/span>\n                        <\/span>\n                        <p>Planeaci\u00f3n digital del caso cl\u00ednico<\/p>\n                    <\/div>\n\n                    <!-- CAMBIO -->\n                    <div class=\"learning-step\" data-step=\"4\">\n                        <span class=\"step-node\">\n                            <span class=\"node-fill\"><\/span>\n                            <span class=\"node-number\">4<\/span>\n                        <\/span>\n                        <p>Comunicaci\u00f3n, experiencia y conversi\u00f3n del paciente<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- BOT\u00d3N FUNCIONANDO -->\n            <div class=\"cert-cta reveal-panel\">\n                <a href=\"javascript:void(0)\" onclick=\"openContactModal()\" class=\"cert-register-btn\">\n                    Registrarse\n                <\/a>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"cert-side\">\n            <div class=\"cert-visual-stage reveal-panel\" id=\"certVisualStage\" aria-hidden=\"true\">\n                <div class=\"cert-ambient-glow\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.portfolio-cert-section {\n    position: relative;\n    overflow: hidden;\n    padding: 64px 60px;\n    min-height: 78vh;\n    isolation: isolate;\n    background: url('http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/06\/La-mejor-tecnologia-de-diseno-digital-a-tu-alcance.png') center center \/ cover no-repeat;\n    font-family: 'Montserrat', sans-serif;\n}\n\n.cert-topo-wireframe {\n    position: absolute;\n    inset: 0;\n    opacity: 0.26;\n    background:\n        radial-gradient(circle at center, rgba(101, 132, 138, 0.14) 0 1px, transparent 1px),\n        radial-gradient(circle at center, rgba(139, 196, 63, 0.12) 0 1px, transparent 1px),\n        repeating-radial-gradient(circle at center, rgba(101, 132, 138, 0.08) 0 1px, transparent 1px 28px);\n    background-size: 34px 34px, 54px 54px, 180px 180px;\n    background-position: 0 0, 18px 18px, 0 0;\n    transform: skewY(-5deg) scale(1.1);\n    animation: topoDrift 24s linear infinite;\n    pointer-events: none;\n}\n\n@keyframes topoDrift {\n    from {\n        background-position: 0 0, 18px 18px, 0 0;\n    }\n    to {\n        background-position: 120px 90px, 88px 78px, 180px 120px;\n    }\n}\n\n.cert-inner {\n    position: relative;\n    z-index: 1;\n    max-width: 1400px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 34px;\n    align-items: start;\n}\n\n.cert-copy {\n    max-width: 920px;\n}\n\n.cert-kicker {\n    margin: 0 0 10px;\n    color: #2a3436;\n    font-size: 0.82rem;\n    text-transform: uppercase;\n    font-weight: 800;\n    letter-spacing: 2px;\n}\n\n.cert-title {\n    margin: 0;\n    color: #111111;\n    font-size: clamp(2rem, 4vw, 3.8rem);\n    line-height: 1.02;\n    max-width: 14ch;\n}\n\n.cert-title-solid {\n    display: block;\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 800;\n    color: #111111;\n}\n\n.cert-title-script {\n    display: block;\n    font-family: 'ParslayCustom', cursive;\n    color: #8bc43f;\n    font-size: 1.35em;\n    line-height: 0.9;\n    margin-top: 6px;\n}\n\n.cert-scroll-copy {\n    margin-top: 22px;\n    max-width: 760px;\n}\n\n.cert-scroll-copy p {\n    margin: 0;\n    color: #1f2a2c;\n    font-size: clamp(1rem, 1.45vw, 1.18rem);\n    line-height: 1.95;\n}\n\n.learning-map {\n    margin-top: 34px;\n    max-width: 850px;\n}\n\n.cert-cta {\n    margin-top: 30px;\n}\n\n.cert-register-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 48px;\n    padding: 0 24px;\n    border-radius: 4px;\n    background: #8bc43f;\n    border: 2px solid #8bc43f;\n    color: #ffffff;\n    font-family: 'Montserrat', sans-serif;\n    font-size: 0.82rem;\n    font-weight: 800;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    text-decoration: none;\n    transition: all 0.3s ease;\n}\n\n.cert-register-btn:hover {\n    background: #7ab22d;\n    border-color: #7ab22d;\n    color: #ffffff;\n    transform: translateY(-2px);\n}\n\n.learning-map-header {\n    margin-bottom: 18px;\n    text-align: center;\n}\n\n.learning-map-kicker {\n    color: #8bc43f;\n    font-size: 0.74rem;\n    font-weight: 800;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n}\n\n.learning-step {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 10px;\n}\n\n.step-node {\n    position: relative;\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    background: #ffffff;\n    border: 2px solid rgba(24, 79, 69, 0.18);\n    box-shadow: 0 10px 20px rgba(15, 31, 33, 0.08);\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n}\n\n.node-fill {\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    background: radial-gradient(circle at 35% 30%, #b7df70 0%, #8bc43f 55%, #184f45 100%);\n    transform: scale(0);\n    transform-origin: center;\n    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;\n    opacity: 0;\n}\n\n.node-number {\n    position: relative;\n    z-index: 1;\n    font-size: 0.82rem;\n    font-weight: 800;\n    color: #184f45;\n    transition: color 0.35s ease;\n}\n\n.learning-step p {\n    margin: 0;\n    color: #1f2a2c;\n    font-size: 0.92rem;\n    line-height: 1.5;\n    font-weight: 600;\n    max-width: 180px;\n}\n\n.learning-step.active .node-fill {\n    transform: scale(1);\n    opacity: 1;\n}\n\n.learning-step.active .node-number {\n    color: #ffffff;\n}\n\n.learning-step.active .step-node {\n    border-color: rgba(139, 196, 63, 0.32);\n    box-shadow: 0 12px 24px rgba(24, 79, 69, 0.2);\n}\n\n.learning-step.active p {\n    color: #111111;\n}\n\n.learning-track {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: 18px;\n    align-items: start;\n    padding-top: 10px;\n}\n\n.learning-track-line {\n    position: absolute;\n    left: 28px;\n    right: 28px;\n    top: 27px;\n    height: 10px;\n    border-radius: 999px;\n    background: rgba(24, 79, 69, 0.1);\n    overflow: hidden;\n}\n\n.learning-track-fill {\n    position: absolute;\n    left: 28px;\n    top: 27px;\n    height: 10px;\n    width: 0%;\n    border-radius: 999px;\n    background: linear-gradient(90deg, #184f45 0%, #8bc43f 70%, #b9df72 100%);\n    box-shadow: 0 0 18px rgba(139, 196, 63, 0.35);\n    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.reveal-panel {\n    opacity: 0;\n    transform: translateY(24px);\n    transition: opacity 0.7s ease, transform 0.7s ease;\n}\n\n.reveal-panel.visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n@media (max-width: 960px) {\n    .portfolio-cert-section {\n        padding: 52px 20px;\n        min-height: 68vh;\n    }\n\n    .learning-track {\n        grid-template-columns: 1fr;\n        gap: 22px;\n        padding-top: 0;\n    }\n\n    .learning-track-line,\n    .learning-track-fill {\n        display: none;\n    }\n\n    .learning-step {\n        flex-direction: row;\n        align-items: center;\n        text-align: left;\n        justify-content: flex-start;\n    }\n\n    .learning-step p {\n        max-width: none;\n    }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n    const section = document.getElementById('portafolio-certificacion');\n    const learningSteps = Array.from(document.querySelectorAll('.learning-step'));\n    const learningTrackFill = document.getElementById('learningTrackFill');\n    const reveals = Array.from(document.querySelectorAll('.reveal-panel'));\n\n    if (!section) return;\n\n    const revealObserver = new IntersectionObserver((entries) => {\n        entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('visible');\n            }\n        });\n    }, { threshold: 0.15 });\n\n    reveals.forEach((element) => revealObserver.observe(element));\n\n    let currentStep = 0;\n\n    function animateSteps() {\n\n        learningSteps.forEach((step, index) => {\n            step.classList.toggle('active', index <= currentStep);\n        });\n\n        const progress = ((currentStep + 1) \/ learningSteps.length) * 100;\n        learningTrackFill.style.width = progress + '%';\n\n        currentStep++;\n\n        if (currentStep >= learningSteps.length) {\n            setTimeout(() => {\n                learningSteps.forEach(step => step.classList.remove('active'));\n                learningTrackFill.style.width = '0%';\n                currentStep = 0;\n            }, 1800);\n        }\n    }\n\n    animateSteps();\n    setInterval(animateSteps, 1600);\n\n});\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<section class=\"portfolio-plan-section\" id=\"portafolio-planificacion\">\n    <div class=\"plan-grid\">\n        <div class=\"plan-copy\">\n            <p class=\"plan-kicker\">El n\u00facleo tecnol\u00f3gico<\/p>\n            <h2 class=\"plan-title\">\n                <span class=\"plan-title-script\">Planificaci\u00f3n 3D<\/span>\n                <span class=\"plan-title-solid\">Previsibilidad Absoluta<\/span>\n            <\/h2>\n\n            <!-- TEXTO NUEVO -->\n            <p class=\"plan-lead\">\n                Transformamos las ayudas diagn\u00f3sticas y la orden de tratamiento en una planificaci\u00f3n digital estructurada y alineada con el criterio cl\u00ednico del ortodoncista. Nuestro flujo digital contempla variables clave como la secuencia de movimientos, calcula la cantidad de alineadores, el tiempo estimado del tratamiento y mapea estrat\u00e9gicamente los requerimientos de attachments y stripping.\n            <\/p>\n\n            <p class=\"plan-lead plan-lead-secondary\">\n                Gestiona tus casos desde nuestro portal especializado y revisa cada planificaci\u00f3n en un software dise\u00f1ado para analizar la simulaci\u00f3n, solicitar ajustes y realizar modificaciones seg\u00fan las necesidades cl\u00ednicas de cada paciente.\n            <\/p>\n\n            <!-- CTA NUEVO -->\n            <div class=\"plan-cta\">\n                <a href=\"javascript:void(0)\" onclick=\"openContactModal()\" class=\"plan-btn\">\n                    Solicitar planificaci\u00f3n\n                <\/a>\n            <\/div>\n        <\/div>\n\n        <!-- CONTENEDOR DEL VIDEO CUADRADO -->\n        <div class=\"plan-dashboard reveal-dashboard\" aria-label=\"Video de planificaci\u00f3n 3D\">\n            <video class=\"plan-video\" autoplay muted loop playsinline preload=\"metadata\">\n                <source src=\"http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/Videdo-planificacion-3d.mp4\" type=\"video\/mp4\">\n                Tu navegador no soporta video HTML5.\n            <\/video>\n\n            <!-- OVERLAY SUAVE -->\n            <div class=\"plan-video-overlay\"><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n@font-face {\n    font-family: 'ParslayCustom';\n    src: url('https:\/\/digitaline.com.co\/wp-content\/uploads\/fonts\/parslay.otf') format('opentype');\n    font-display: swap;\n}\n\n.portfolio-plan-section {\n    padding: 64px 60px;\n    background:\n        radial-gradient(circle at top right, rgba(139, 196, 63, 0.15), transparent 30%),\n        radial-gradient(circle at bottom left, rgba(101, 132, 138, 0.16), transparent 34%),\n        linear-gradient(180deg, #f8fbfb 0%, #eef4f2 100%);\n    font-family: 'Montserrat', sans-serif;\n    overflow: hidden;\n}\n\n.plan-grid {\n    max-width: 1400px;\n    margin: 0 auto;\n    display: grid;\n    \/* Ajustamos las columnas para que el lado del video sea un poco m\u00e1s compacto en pantallas grandes *\/\n    grid-template-columns: 1.1fr 0.9fr;\n    gap: 54px;\n    align-items: center;\n}\n\n.plan-copy {\n    max-width: 920px;\n}\n\n.plan-kicker {\n    margin: 0 0 10px;\n    color: #5f7b81;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    font-size: 0.82rem;\n    font-weight: 800;\n}\n\n.plan-title {\n    margin: 0;\n    color: #1d2a2c;\n    font-size: clamp(2rem, 4vw, 3.8rem);\n    line-height: 1.02;\n}\n\n.plan-title-script {\n    display: inline-block;\n    font-family: 'ParslayCustom', cursive;\n    color: #8bc43f;\n    font-size: 1.08em;\n    line-height: 0.92;\n}\n\n.plan-title-solid {\n    display: block;\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 800;\n    color: #1d2a2c;\n    margin-top: 6px;\n}\n\n.plan-lead {\n    color: #4f6569;\n    line-height: 1.9;\n    font-size: 1.02rem;\n    margin: 20px 0 0;\n    max-width: 760px;\n}\n\n.plan-lead-secondary {\n    margin-top: 16px;\n}\n\n\/* CTA *\/\n.plan-cta {\n    margin-top: 34px;\n}\n\n.plan-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 48px;\n    padding: 12px 34px;\n    border-radius: 4px;\n    background: #8bc43f;\n    border: 2px solid #8bc43f;\n    color: #ffffff;\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    font-size: 13px;\n    font-weight: 700;\n    transition: all 0.3s ease;\n}\n\n.plan-btn:hover {\n    background: transparent;\n    color: #8bc43f;\n    transform: translateY(-3px);\n}\n\n\/* NUEVA ESTRUCTURA CUADRADA CON LIMITADOR *\/\n.plan-dashboard {\n    position: relative;\n    border-radius: 30px;\n    background: #0f1a1b;\n    box-shadow: 0 28px 70px rgba(8, 16, 17, 0.22);\n    overflow: hidden;\n    \n    width: 100%;\n    aspect-ratio: 1 \/ 1; \/* Forzamos proporciones 1:1 perfectas (Cuadrado) *\/\n    max-width: 500px;    \/* Controla el tama\u00f1o m\u00e1ximo en pantallas gigantes *\/\n    justify-self: center; \/* Centra el cuadro dentro de su columna *\/\n}\n\n.plan-video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover; \/* El video se adaptar\u00e1 llenando el cuadro sin deformarse *\/\n}\n\n.plan-video-overlay {\n    position: absolute;\n    inset: 0;\n    background:\n        linear-gradient(\n            to top,\n            rgba(15, 26, 27, 0.35),\n            rgba(15, 26, 27, 0.05)\n        );\n    pointer-events: none;\n}\n\n.reveal-dashboard {\n    opacity: 0;\n    transform: translateY(24px) scale(0.985);\n    animation: dashboardReveal 0.95s ease forwards;\n    animation-delay: 0.12s;\n}\n\n@keyframes dashboardReveal {\n    to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n}\n\n@media (max-width: 980px) {\n    .portfolio-plan-section {\n        padding: 52px 20px;\n    }\n\n    .plan-grid {\n        grid-template-columns: 1fr;\n        gap: 38px;\n    }\n\n    \/* En m\u00f3viles reduce un poco el ancho m\u00e1ximo para que no se vea gigante *\/\n    .plan-dashboard {\n        max-width: 420px;\n    }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {});\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&amp;display=swap\" rel=\"stylesheet\">\n\n<section class=\"portfolio-fabricacion-section\" id=\"portafolio-fabricacion\">\n    <div class=\"fabricacion-bg-grid\"><\/div>\n\n    <div class=\"fabricacion-container\">\n\n        <div class=\"fabricacion-visual reveal-fabricacion\">\n            <div class=\"fabricacion-video-wrap\">\n                <video class=\"fabricacion-video\" autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"metadata\">\n                    <source src=\"https:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/08\/Reel-3-Nuestro-proceso-de-fabricacion.mp4\" type=\"video\/mp4\">\n                    Tu navegador no soporta video HTML5.\n                <\/video>\n            <\/div>\n        <\/div>\n\n        <div class=\"fabricacion-copy\">\n            <p class=\"fabricacion-kicker\">\n                Soluciones de fabricaci\u00f3n\n            <\/p>\n\n            <h2 class=\"fabricacion-title\">\n                <span class=\"fabricacion-script\">Ortodoncia<\/span>\n                <span class=\"fabricacion-solid\">Invisible de Alta Precisi\u00f3n<\/span>\n            <\/h2>\n\n            <p class=\"fabricacion-lead\">\n                Fabricamos alineadores bajo las especificaciones cl\u00ednicas de cada caso, integrando materiales de alta calidad y diferentes alternativas de fabricaci\u00f3n para optimizar la experiencia del ortodoncista y del paciente.\n            <\/p>\n\n            <p class=\"fabricacion-lead fabricacion-lead-secondary\">\n                Nuestro flujo contempla diferentes tipos de corte, fabricaci\u00f3n de plantillas para cementaci\u00f3n de attachments, retenedores y soluciones complementarias para facilitar cada etapa del tratamiento.\n            <\/p>\n\n            <div class=\"fabricacion-feature-grid\">\n                <div class=\"fabricacion-feature reveal-fabricacion delay-1\">\n                    <div class=\"feature-icon\"><\/div>\n                    <div class=\"feature-content\">\n                        <h3>Diferentes materiales<\/h3>\n                        <p>Opciones de fabricaci\u00f3n seg\u00fan biomec\u00e1nica, resistencia y requerimientos cl\u00ednicos.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"fabricacion-feature reveal-fabricacion delay-2\">\n                    <div class=\"feature-icon\"><\/div>\n                    <div class=\"feature-content\">\n                        <h3>Tipos de corte<\/h3>\n                        <p>Corte recto o festoneado seg\u00fan el dise\u00f1o y comportamiento del alineador.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"fabricacion-feature reveal-fabricacion delay-3\">\n                    <div class=\"feature-icon\"><\/div>\n                    <div class=\"feature-content\">\n                        <h3>Botones y el\u00e1sticos<\/h3>\n                        <p>Dise\u00f1os preparados para cementar botones o incorporar el\u00e1sticos directamente.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"fabricacion-feature reveal-fabricacion delay-4\">\n                    <div class=\"feature-icon\"><\/div>\n                    <div class=\"feature-content\">\n                        <h3>Attachments y retenedores<\/h3>\n                        <p>Fabricaci\u00f3n de plantillas para attachments y retenedores personalizados.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"fabricacion-cta reveal-fabricacion delay-4\">\n                <a href=\"javascript:void(0)\" onclick=\"openContactModal()\" class=\"fabricacion-btn\">\n                    Solicitar informaci\u00f3n\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n@font-face {\n    font-family: 'ParslayCustom';\n    src: url('https:\/\/digitaline.com.co\/wp-content\/uploads\/fonts\/parslay.otf') format('opentype');\n    font-display: swap;\n}\n\n.portfolio-fabricacion-section {\n    position: relative;\n    overflow: hidden;\n    padding: 40px 48px;\n    background:\n        radial-gradient(circle at top left, rgba(139, 196, 63, 0.14), transparent 28%),\n        radial-gradient(circle at bottom right, rgba(101, 132, 138, 0.16), transparent 34%),\n        linear-gradient(180deg, #ffffff 0%, #f3f7f6 100%);\n    font-family: 'Montserrat', sans-serif;\n}\n\n.fabricacion-bg-grid {\n    position: absolute;\n    inset: 0;\n    background-image:\n        linear-gradient(rgba(101, 132, 138, 0.04) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(101, 132, 138, 0.04) 1px, transparent 1px);\n    background-size: 34px 34px;\n    opacity: 0.6;\n    pointer-events: none;\n}\n\n.fabricacion-container {\n    position: relative;\n    z-index: 2;\n    max-width: 1450px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 100px;\n    align-items: center; \/* CAMBIO: antes \"stretch\" -> ya no estira el video para igualar la columna de texto *\/\n}\n\n.fabricacion-visual {\n    \/* CAMBIO: se quit\u00f3 \"height: 100%\" -> el tama\u00f1o ahora lo controla aspect-ratio en .fabricacion-video-wrap *\/\n}\n\n.fabricacion-video-wrap {\n    position: relative;\n    overflow: hidden;\n    border-radius: 34px;\n    background: #0f1a1b;\n    box-shadow: 0 32px 80px rgba(8, 16, 17, 0.2);\n    aspect-ratio: 5 \/ 6; \/* CAMBIO: vertical, ~10% m\u00e1s bajo que la versi\u00f3n anterior (3\/4) *\/\n    width: 100%;\n}\n\n.fabricacion-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover; \/* recorta cualquier video para llenar el marco sin deformarse *\/\n    display: block;\n    filter: contrast(1.03) saturate(1.04);\n}\n\n.fabricacion-video-wrap::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to top, rgba(15, 26, 27, 0.42), transparent 34%);\n    pointer-events: none;\n}\n\n.fabricacion-copy {\n    max-width: 650px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.fabricacion-kicker {\n    margin: 0 0 16px;\n    color: #8bc43f;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    font-size: 0.78rem;\n    font-weight: 800;\n}\n\n.fabricacion-title {\n    margin: 0;\n    line-height: 1;\n}\n\n.fabricacion-script {\n    display: block;\n    font-family: 'ParslayCustom', cursive;\n    color: #8bc43f;\n    font-size: 4rem;\n    line-height: 0.88;\n}\n\n.fabricacion-solid {\n    display: block;\n    margin-top: 8px;\n    font-size: clamp(1.6rem, 3.2vw, 3rem);\n    line-height: 1.02;\n    font-weight: 800;\n    color: #1d2a2c;\n    max-width: 12ch;\n}\n\n.fabricacion-lead {\n    margin-top: 2px;\n    color: #4f6569;\n    font-size: 0.96rem;\n    line-height: 1.75;\n    font-weight: 400;\n}\n\n.fabricacion-lead-secondary {\n    margin-top: 4px;\n}\n\n.fabricacion-feature-grid {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n    margin-top: 1px;\n}\n\n.fabricacion-feature {\n    display: flex;\n    gap: 14px;\n    padding: 14px 16px;\n    border-radius: 20px;\n    background: #ffffff;\n    border: 1px solid rgba(101, 132, 138, 0.1);\n    box-shadow: 0 18px 40px rgba(15, 31, 33, 0.06);\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease,\n        border-color 0.3s ease;\n}\n\n.fabricacion-feature:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 24px 48px rgba(15, 31, 33, 0.1);\n    border-color: rgba(139, 196, 63, 0.2);\n}\n\n.feature-icon {\n    width: 14px;\n    min-width: 14px;\n    height: 14px;\n    margin-top: 6px;\n    border-radius: 50%;\n    background: linear-gradient(180deg, #8bc43f, #184f45);\n    box-shadow: 0 0 14px rgba(139, 196, 63, 0.35);\n}\n\n.feature-content h3 {\n    margin: 0 0 6px;\n    color: #1d2a2c;\n    font-size: 0.95rem;\n    font-weight: 700;\n    line-height: 1.3;\n}\n\n.feature-content p {\n    margin: 0;\n    color: #5f7074;\n    font-size: 0.88rem;\n    line-height: 1.6;\n    font-weight: 400;\n}\n\n.fabricacion-cta {\n    margin-top: 20px;\n}\n\n.fabricacion-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 46px;\n    padding: 10px 30px;\n    border-radius: 4px;\n    background: #8bc43f;\n    border: 2px solid #8bc43f;\n    color: #ffffff;\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    font-size: 0.82rem;\n    font-weight: 800;\n    transition: all 0.3s ease;\n}\n\n.fabricacion-btn:hover {\n    background: transparent;\n    color: #8bc43f;\n    transform: translateY(-3px);\n}\n\n.reveal-fabricacion {\n    opacity: 0;\n    transform: translateY(24px);\n    animation: revealFabricacion 0.9s ease forwards;\n}\n\n.delay-1 { animation-delay: 0.08s; }\n.delay-2 { animation-delay: 0.16s; }\n.delay-3 { animation-delay: 0.24s; }\n.delay-4 { animation-delay: 0.32s; }\n\n@keyframes revealFabricacion {\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (max-width: 980px) {\n    .portfolio-fabricacion-section {\n        padding: 36px 20px;\n    }\n\n    .fabricacion-container {\n        grid-template-columns: 1fr;\n        gap: 24px;\n    }\n\n    .fabricacion-video-wrap {\n        aspect-ratio: 5 \/ 6; \/* CAMBIO: misma proporci\u00f3n vertical que en escritorio *\/\n    }\n\n    .fabricacion-script {\n        font-size: 3rem;\n    }\n\n    .fabricacion-solid {\n        font-size: 1.8rem;\n        max-width: none;\n    }\n\n    .fabricacion-feature-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .fabricacion-copy {\n        max-width: 100%;\n    }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const revealElements = document.querySelectorAll('.reveal-fabricacion');\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n                entry.target.style.animationPlayState = 'running';\n            }\n        });\n    }, { threshold: 0.15 });\n\n    revealElements.forEach((element) => {\n        element.style.animationPlayState = 'paused';\n        observer.observe(element);\n    });\n});\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<section class=\"portfolio-cases-section\" id=\"portafolio-casos\">\n    <div class=\"cases-inner\">\n\n        <div class=\"cases-header\">\n            <p class=\"cases-kicker\">La evidencia<\/p>\n\n            <h2 class=\"cases-title\">\n                <span class=\"cases-title-script\">Evidencia Cl\u00ednica<\/span>\n                <span class=\"cases-title-solid\">Resultados Tangibles<\/span>\n            <\/h2>\n\n            <p class=\"cases-lead\">\n                Interact\u00faa con las fotograf\u00edas intraorales y descubre la transformaci\u00f3n de cada caso.\n            <\/p>\n        <\/div>\n\n        <div class=\"cases-selector\">\n            <button class=\"case-tab active\" data-case=\"0\">\n                <span class=\"case-tab-icon\">\u27f3<\/span>\n                <span class=\"case-tab-label\">Alineaci\u00f3n<\/span>\n            <\/button>\n            <button class=\"case-tab\" data-case=\"1\">\n                <span class=\"case-tab-icon\">\u27f7<\/span>\n                <span class=\"case-tab-label\">Diastema<\/span>\n            <\/button>\n            <button class=\"case-tab\" data-case=\"2\">\n                <span class=\"case-tab-icon\">\u25eb<\/span>\n                <span class=\"case-tab-label\">Api\u00f1amiento<\/span>\n            <\/button>\n            <button class=\"case-tab\" data-case=\"3\">\n                <span class=\"case-tab-icon\">\u2312<\/span>\n                <span class=\"case-tab-label\">Mordida Profunda<\/span>\n            <\/button>\n            <button class=\"case-tab\" data-case=\"4\">\n                <span class=\"case-tab-icon\">\u232f<\/span>\n                <span class=\"case-tab-label\">L\u00ednea Media<\/span>\n            <\/button>\n            <button class=\"case-tab\" data-case=\"5\">\n                <span class=\"case-tab-icon\">\u25e1<\/span>\n                <span class=\"case-tab-label\">Acople Posterior<\/span>\n            <\/button>\n        <\/div>\n\n        <div class=\"cases-stage-area\">\n            <div class=\"comparison-shell\">\n                <div class=\"comparison-stage\" id=\"comparisonStage\" style=\"--split:50%;\">\n                    <div class=\"comparison-image comparison-before\" id=\"imgBefore\"><\/div>\n                    <div class=\"comparison-image comparison-after\" id=\"imgAfter\"><\/div>\n                    <div class=\"distortion-strip\"><\/div>\n\n                    <div class=\"comparison-label comparison-label-before\">Antes<\/div>\n                    <div class=\"comparison-label comparison-label-after\">Despu\u00e9s<\/div>\n\n                    <input class=\"comparison-range\" id=\"comparisonRange\" type=\"range\" min=\"0\" max=\"100\" value=\"50\">\n                    <div class=\"comparison-handle\"><\/div>\n                <\/div>\n\n                <div class=\"evidence-indicators\" id=\"evidenceIndicators\"><\/div>\n\n                <div class=\"case-info-bar\">\n                    <div class=\"case-info-badge\" id=\"caseBadge\">Alineaci\u00f3n<\/div>\n                    <p class=\"case-info-desc\" id=\"caseDesc\">\n                        Correcci\u00f3n de posici\u00f3n dental mediante alineadores secuenciales de precisi\u00f3n.\n                    <\/p>\n                    <div class=\"case-info-stats\" id=\"caseStats\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<svg width=\"0\" height=\"0\" class=\"visually-hidden\">\n    <filter id=\"waterWobble\">\n        <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.02 0.01\" numOctaves=\"2\" seed=\"3\" result=\"noise\">\n            <animate attributeName=\"baseFrequency\" dur=\"8s\" values=\"0.02 0.01;0.03 0.015;0.02 0.01\" repeatCount=\"indefinite\"><\/animate>\n        <\/feTurbulence>\n        <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale=\"18\" xChannelSelector=\"R\" yChannelSelector=\"G\"><\/feDisplacementMap>\n    <\/filter>\n<\/svg>\n\n<style>\n@font-face {\n    font-family: 'ParslayCustom';\n    src: url('https:\/\/digitaline.com.co\/wp-content\/uploads\/fonts\/parslay.otf') format('opentype');\n    font-display: swap;\n}\n\n.portfolio-cases-section {\n    padding: 80px 60px;\n    background: radial-gradient(circle at top right, rgba(139,196,63,0.12), transparent 30%), radial-gradient(circle at bottom left, rgba(101,132,138,0.14), transparent 34%), linear-gradient(180deg,#ffffff 0%,#f4f8f7 100%);\n    font-family: 'Montserrat', sans-serif;\n}\n\n.cases-inner { max-width: 1250px; margin: 0 auto; }\n.cases-header { text-align: center; margin-bottom: 48px; }\n.cases-kicker { margin: 0 0 10px; color: #8bc43f; text-transform: uppercase; letter-spacing: 3px; font-size: .78rem; font-weight: 800; }\n.cases-title { margin: 0; line-height: 1.02; }\n.cases-title-script { display: block; font-family: 'ParslayCustom', cursive; color: #1d2a2c; font-size: clamp(2.8rem,5vw,4.2rem); line-height: .95; }\n.cases-title-solid { display: block; margin-top: 4px; color: #8bc43f; font-size: clamp(1.2rem,2.5vw,1.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }\n.cases-lead { margin: 16px auto 0; max-width: 560px; color: #4f6569; line-height: 1.8; font-size: 1rem; }\n\n.cases-selector { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }\n.case-tab { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 50px; border: 2px solid rgba(101,132,138,.2); background: rgba(255,255,255,.88); color: #4f6569; font-family: 'Montserrat', sans-serif; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; transition: .3s ease; backdrop-filter: blur(8px); }\n.case-tab:hover { border-color: #8bc43f; transform: translateY(-2px); }\n.case-tab.active { background: #1a2628; border-color: #1a2628; color: #8bc43f; transform: translateY(-2px); }\n\n.comparison-shell { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(15,31,33,.18); }\n.comparison-stage { position: relative; height: 560px; background: #dbe5e7; isolation: isolate; transition: opacity .3s ease; }\n.comparison-stage.switching { opacity: 0; }\n.comparison-image { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; transition: clip-path .06s linear; }\n.comparison-before { clip-path: inset(0 calc(100% - var(--split,50%)) 0 0); }\n.comparison-after { clip-path: inset(0 0 0 var(--split,50%)); }\n\n.distortion-strip {\n    position: absolute; top: 0; bottom: 0; left: calc(var(--split,50%) - 18px); width: 36px;\n    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(139,196,63,.14));\n    filter: url(#waterWobble); mix-blend-mode: screen; opacity: .9; pointer-events: none;\n}\n\n.comparison-label {\n    position: absolute; top: 20px; z-index: 2; padding: 8px 14px; border-radius: 999px;\n    background: rgba(12,18,19,.52); backdrop-filter: blur(8px); color: #fff;\n    font-size: .72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;\n}\n.comparison-label-before { left: 20px; }\n.comparison-label-after { right: 20px; }\n\n.comparison-range { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: ew-resize; z-index: 4; }\n\n.comparison-handle {\n    position: absolute; top: 0; bottom: 0; left: calc(var(--split,50%) - 2px); width: 4px;\n    background: #ffffff; z-index: 3; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 26px rgba(139,196,63,.55);\n}\n\n.comparison-handle::before {\n    content: '';\n    position: absolute; top: 50%; left: 50%; width: 52px; height: 52px;\n    border-radius: 50%; transform: translate(-50%,-50%);\n    background: #ffffff; box-shadow: 0 12px 28px rgba(0,0,0,.22);\n}\n\n.comparison-handle::after {\n    content: '';\n    position: absolute; top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 24px; height: 14px;\n    border-left: 3px solid #65848a;\n    border-right: 3px solid #65848a;\n    background: linear-gradient(to right, transparent 40%, #65848a 40%, #65848a 60%, transparent 60%) no-repeat center\/100% 2px;\n}\n\n.case-info-bar { background: #1a2628; padding: 24px 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }\n.case-info-badge { flex-shrink: 0; background: #8bc43f; color: #1a2628; font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: 1.5px; padding: 7px 16px; border-radius: 50px; }\n.case-info-desc { flex: 1; margin: 0; color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.6; min-width: 180px; }\n.case-info-stats { display: flex; gap: 24px; flex-wrap: wrap; }\n.case-info-stats strong { display: block; font-size: 1rem; color: #8bc43f; font-weight: 800; }\n.case-info-stats span { display: block; margin-top: 3px; font-size: .7rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; }\n\n.evidence-indicators { display: flex; justify-content: center; gap: 8px; padding: 16px; background: rgba(26,38,40,.6); border-top: 1px solid rgba(139,196,63,.1); }\n.evidence-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); border: 1.5px solid rgba(139,196,63,.3); cursor: pointer; transition: .3s ease; }\n.evidence-dot.active { background: #8bc43f; border-color: #8bc43f; transform: scale(1.2); }\n.evidence-dot:hover { border-color: #8bc43f; }\n\n.visually-hidden { position: absolute; width: 0; height: 0; overflow: hidden; }\n\n@media(max-width:960px) {\n    .portfolio-cases-section { padding: 52px 20px; }\n    .comparison-stage { height: 420px; }\n    .case-info-bar { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; }\n}\n@media(max-width:520px) {\n    .comparison-stage { height: 320px; }\n    .case-tab { padding: 10px 14px; font-size: .74rem; }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const cases = [\n        {\n            label: 'Alineaci\u00f3n',\n            desc: 'Correcci\u00f3n de posici\u00f3n dental mediante alineadores secuenciales de precisi\u00f3n.',\n            evidences: [\n                { before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/Antes.png', after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/Despues.png' }\n            ],\n            stats: [{ value: '15', label: 'alineadores' }]\n        },\n        {\n            label: 'Diastema',\n            desc: 'Cierre de espacios interdentales mediante biomec\u00e1nica digital y movimientos controlados.',\n            evidences: [\n                { before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/1-1-1.png', after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/1-2-1.png' },\n                { before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/2-1-1.png', after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/2-2-1.png' },\n                { before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/3-1-1.png', after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/3-2-1.png' }\n            ],\n            stats: [{ value: 'Caso cl\u00ednico', label: 'cierre de espacios' }]\n        },\n        {\n            label: 'Api\u00f1amiento',\n            desc: 'Resoluci\u00f3n de api\u00f1amiento moderado y severo mediante planificaci\u00f3n digital 3D.',\n            evidences: [\n                {\n                    before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/1-1.png',\n                    after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/1-2.png',\n                    desc: 'Api\u00f1amiento arco inferior.',\n                    stats: [{ value: '19', label: 'alineadores' }]\n                },\n                {\n                    before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/2-1.png',\n                    after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/2-2.png',\n                    desc: 'Api\u00f1amiento severo arco inferior.',\n                    stats: []\n                },\n                {\n                    before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/3-1.png',\n                    after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/3-2.png',\n                    desc: 'Api\u00f1amiento moderado superior.',\n                    stats: [{ value: '14', label: 'alineadores' }]\n                },\n                {\n                    before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/4-1.jpeg',\n                    after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/4-2.jpeg',\n                    desc: 'Api\u00f1amiento severo arco inferior.',\n                    stats: []\n                }\n            ],\n            stats: []\n        },\n        {\n            label: 'Mordida Profunda',\n            desc: 'Control vertical y correcci\u00f3n de sobremordida mediante biomec\u00e1nica digital.',\n            evidences: [\n                { before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/1-1-2.png', after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/1-2-2.png' },\n                { before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/2-1-2.png', after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/2-2-2.png' }\n            ],\n            stats: [{ value: 'Caso cl\u00ednico', label: 'mordida profunda' }]\n        },\n        {\n            label: 'Correcci\u00f3n L\u00ednea Media',\n            desc: 'Correcci\u00f3n de l\u00ednea media dental mediante movimientos secuenciales y refinamientos.',\n            evidences: [\n                { before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/Antes-3.png', after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/Despues-3.png' }\n            ],\n            stats: [\n                { value: '15', label: 'alineadores sup.' },\n                { value: '20', label: 'alineadores inf.' }\n            ]\n        },\n        {\n            label: 'Acople Posterior',\n            desc: 'Optimizaci\u00f3n del acople posterior y estabilidad oclusal mediante planificaci\u00f3n digital.',\n            evidences: [\n                { before: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/Antes-4.png', after: 'http:\/\/digitaline.com.co\/wp-content\/uploads\/2026\/05\/Despues-4.png' }\n            ],\n            stats: [{ value: 'Caso cl\u00ednico', label: 'acople posterior' }]\n        }\n    ];\n\n    const range = document.getElementById('comparisonRange');\n    const stage = document.getElementById('comparisonStage');\n    const imgBefore = document.getElementById('imgBefore');\n    const imgAfter = document.getElementById('imgAfter');\n    const badge = document.getElementById('caseBadge');\n    const desc = document.getElementById('caseDesc');\n    const statsEl = document.getElementById('caseStats');\n    const indicatorsEl = document.getElementById('evidenceIndicators');\n    const tabs = document.querySelectorAll('.case-tab');\n\n    let currentCaseIndex = 0;\n    let currentEvidenceIndex = 0;\n\n    const updateSplit = () => {\n        stage.style.setProperty('--split', `${range.value}%`);\n    };\n\n    range.addEventListener('input', updateSplit);\n    updateSplit();\n\n    const updateIndicators = () => {\n        indicatorsEl.innerHTML = '';\n        const c = cases[currentCaseIndex];\n        c.evidences.forEach((_, idx) => {\n            const dot = document.createElement('div');\n            dot.className = `evidence-dot ${idx === currentEvidenceIndex ? 'active' : ''}`;\n            dot.addEventListener('click', () => loadEvidence(idx));\n            indicatorsEl.appendChild(dot);\n        });\n    };\n\n    const loadEvidence = (evidenceIdx) => {\n        const c = cases[currentCaseIndex];\n        if (evidenceIdx >= c.evidences.length) return;\n\n        currentEvidenceIndex = evidenceIdx;\n        const evidence = c.evidences[evidenceIdx];\n\n        stage.classList.add('switching');\n        setTimeout(() => {\n            imgBefore.style.backgroundImage = `url('${evidence.before}')`;\n            imgAfter.style.backgroundImage = `url('${evidence.after}')`;\n            if (evidence.desc) {\n                desc.textContent = evidence.desc;\n                statsEl.innerHTML = (evidence.stats || []).map(stat => `\n                    <div><strong>${stat.value}<\/strong><span>${stat.label}<\/span><\/div>\n                `).join('');\n            }\n            range.value = 50;\n            updateSplit();\n            stage.classList.remove('switching');\n            updateIndicators();\n        }, 280);\n    };\n\n    const loadCase = (index) => {\n        currentCaseIndex = index;\n        currentEvidenceIndex = 0;\n        const c = cases[index];\n        const evidence = c.evidences[0];\n\n        stage.classList.add('switching');\n        setTimeout(() => {\n            imgBefore.style.backgroundImage = `url('${evidence.before}')`;\n            imgAfter.style.backgroundImage = `url('${evidence.after}')`;\n            badge.textContent = c.label;\n            desc.textContent = evidence.desc || c.desc;\n            statsEl.innerHTML = (evidence.desc ? (evidence.stats || []) : c.stats).map(stat => `\n                <div><strong>${stat.value}<\/strong><span>${stat.label}<\/span><\/div>\n            `).join('');\n            range.value = 50;\n            updateSplit();\n            stage.classList.remove('switching');\n            updateIndicators();\n        }, 280);\n    };\n\n    tabs.forEach(tab => {\n        tab.addEventListener('click', () => {\n            tabs.forEach(t => t.classList.remove('active'));\n            tab.classList.add('active');\n            loadCase(parseInt(tab.dataset.case));\n        });\n    });\n\n    loadCase(0);\n});\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ortodoncia Invisible Del dise\u00f1o digital a la fabricaci\u00f3n de alineadores Impulsamos tu consulta con soporte tecnol\u00f3gico, cient\u00edfico y acad\u00e9mico continuo para garantizar resultados predecibles y exitosos. Ver certificaci\u00f3n Ver planificaci\u00f3n Biomec\u00e1nica real movimientos predecibles 100% flujo digital 24\/7 soporte continuo Academia Digitaline Lidera la vanguardia La ortodoncia digital transform\u00f3 la manera de diagnosticar, planear y [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-229","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digitaline.com.co\/en\/wp-json\/wp\/v2\/pages\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitaline.com.co\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaline.com.co\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaline.com.co\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaline.com.co\/en\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":91,"href":"https:\/\/digitaline.com.co\/en\/wp-json\/wp\/v2\/pages\/229\/revisions"}],"predecessor-version":[{"id":774,"href":"https:\/\/digitaline.com.co\/en\/wp-json\/wp\/v2\/pages\/229\/revisions\/774"}],"wp:attachment":[{"href":"https:\/\/digitaline.com.co\/en\/wp-json\/wp\/v2\/media?parent=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}