<!--
================================================================================
N.O.E. - NÚCLEO OFIMÁTICO EDUCATIVO
© 2021-2026 Angel Manuel Guevara Chavarría
TODOS LOS DERECHOS RESERVADOS
================================================================================

NOTIFICACIÓN LEGAL DE PROPIEDAD INTELECTUAL Y CONFIDENCIALIDAD

Este documento de origen (en adelante, "el Código fuente") constituye una obra
protegida por las leyes de derechos de autor y tratados internacionales de
propiedad intelectual. El presente archivo HTML, junto con su estructura,
marcado, diseño, lógica de presentación, flujos de navegación, metadatos,
comentarios, recursos embebidos y cualquier elemento derivado, es propiedad
exclusiva y confidencial de Angel Manuel Guevara Chavarría, fundador y
desarrollador principal del Núcleo Ofimático Educativo (N.O.E.).

================================================================================
DECLARACIÓN DE DERECHOS Y PROPIEDAD
================================================================================

AUTOR Y PROPIETARIO LEGAL:
    Angel Manuel Guevara Chavarría
    Fundador y Desarrollador Principal
    N.O.E. - Núcleo Ofimático Educativo
    Registro de Propiedad Intelectual: Activo © 2021-2026

ESTADO LEGAL:
    Este código fuente está protegido bajo:
    - Ley de Derechos de Autor (Copyright Act)
    - Convenio de Berna para la Protección de Obras Literarias y Artísticas
    - Tratado de la OMPI sobre Derechos de Autor (WCT)
    - Ley de Propiedad Intelectual local y normas complementarias
    - Ley de Protección de Datos y Secretos Comerciales
    - Ley Digital Millennium Copyright Act (DMCA)
    - Normativas de Propiedad Industrial y Comercial

================================================================================
AVISO DE CONFIDENCIALIDAD Y RESTRICCIÓN DE USO
================================================================================

EL PRESENTE CÓDIGO FUENTE ES UN DOCUMENTO CONFIDENCIAL Y PROPORCIONADO ÚNICAMENTE
PARA INSPECCIÓN VISUAL CON FINES DE TRANSPARENCIA TÉCNICA.

QUEDA ESTRICTAMENTE PROHIBIDO, BAJO SANCIONES CIVILES Y PENALES:

1.  COPIA Y REPRODUCCIÓN:
    - Copiar total o parcialmente el código fuente
    - Extraer, replicar o clonar elementos estructurales
    - Utilizar fragmentos de código en proyectos propios o terceros
    - Realizar "copy-paste" de secciones completas o parciales

2.  INGENIERÍA INVERSA:
    - Descompilar, desensamblar o reconstruir el código ejecutable
    - Analizar el código para extraer algoritmos, lógicas o patrones
    - Realizar reverse engineering de flujos, estructuras o comportamientos
    - Obtener información propietaria mediante análisis técnico

3.  MODIFICACIÓN Y ADAPTACIÓN:
    - Alterar, transformar o modificar el código original sin autorización
    - Adaptar funciones, estructuras o lógica para otros proyectos
    - Crear obras derivadas sin licencia explícita por escrito
    - Cambiar nombres, variables o identificadores para ocultar origen

4.  DISTRIBUCIÓN NO AUTORIZADA:
    - Compartir el código con terceros sin permiso escrito
    - Publicar en repositorios públicos o privados (GitHub, GitLab, etc.)
    - Distribuir mediante plataformas de código abierto
    - Vender, licenciar o comercializar derivados del código

5.  USO NO AUTORIZADO:
    - Implementar en sitios web, aplicaciones o sistemas propios
    - Utilizar en proyectos comerciales, educativos o personales sin licencia
    - Aprovecharse de la estructura, diseño o lógica para beneficio propio
    - Reutilizar elementos visuales, de marcado o de presentación

6.  OCULTAMIENTO DE AUTORÍA:
    - Remover, alterar u ocultar comentarios legales y de propiedad
    - Eliminar metadatos de autoría, copyright o créditos
    - Suplantar autoría o atribuirse la creación del código
    - Usar el código sin los créditos obligatorios visibles

================================================================================
CONSECUENCIAS LEGALES DE LA INFRACCIÓN
================================================================================

CUALQUIER VIOLACIÓN DE ESTOS TÉRMINOS CONSTITUYE UN DELITO DE PROPRIEDAD
INTELLECTUAL Y PUEDE SER SANCIONADO CON:

A) ACCIONES CIVILES:
   - Demandas por daños y perjuicios económicos (hasta $150,000 USD por obra)
   - Indemnizaciones por uso no autorizado de propiedad intelectual
   - Compensación por lucro cesante y daños morales
   - Costas judiciales y honorarios de abogados
   - Embargos de bienes y cuentas bancarias
   - Incautación de dispositivos y servidores

B) ACCIONES PENALES:
   - Delitos contra la propiedad intelectual (según legislación local)
   - Penas de prisión de 2 a 5 años
   - Multas criminales de hasta $250,000 USD
   - Antecedentes penales permanentes
   - Prohibición de ejercicio comercial

C) MEDIDAS CAUTELARES:
   - Órdenes de cese y desistimiento (cease and desist)
   - Bloqueo de sitios web por orden judicial
   - Retiro forzoso de contenido de motores de búsqueda
   - Suspensión de cuentas en plataformas
   - Incautación preventiva de materiales

D) ACCIONES INTERNACIONALES:
   - Persecución judicial transfronteriza
   - Cooperación internacional (Interpol, Europol, etc.)
   - Sanciones comerciales y arancelarias
   - Inclusión en listas negras de la OMPI/WIPO

================================================================================
SISTEMA DE DETECCIÓN Y MONITOREO ACTIVO
================================================================================

N.O.E. EMPLEA SISTEMAS TÉCNICOS AVANZADOS PARA DETECTAR INFRACCIONES:

- Huellas digitales de código (code fingerprinting)
- Metadatos incrustados con firma criptográfica
- Web crawling 24/7 en todo internet
- IA de detección de clonación de sitios
- Monitoreo de repositorios públicos (GitHub, GitLab, etc.)
- Análisis de similaridad con algoritmos de machine learning
- Rastreo de IPs y direcciones MAC en descargas
- Watermarking invisible en recursos multimedia

TODAS LAS INFRACCIONES DETECTADAS SERÁN DOCUMENTADAS Y PERSEGUIDAS LEGALMENTE.

================================================================================
EXCEPCIONES LIMITADAS (SOLO CON AUTORIZACIÓN)
================================================================================

ÚNICAMENTE SE PERMITE BAJO ESTAS CONDICIONES ESTRICTAS:

1.  INSPECCIÓN EDUCATIVA PERSONAL:
    - Solo para aprendizaje y análisis técnico
    - NO para copiar, reproducir o usar en proyectos
    - NO para compartir con terceros
    - SOLO lectura y estudio, NO implementación

2.  REFERENCIACIÓN ACADÉMICA:
    - Citar fragmentos mínimos (máx. 10 líneas) en trabajos académicos
    - Con atribución completa y visible
    - Solo para fines académicos sin fines de lucro
    - Con permiso escrito para cada caso específico

3.  LICENCIA ESCRITA EXPLÍCITA:
    - Contrato firmado por Angel Manuel Guevara Chavarría
    - Licencia comercial negociada directamente
    - Condiciones específicas por proyecto
    - Renovación anual obligatoria

NINGUNA OTRA EXCEPCIÓN EXISTE. SI NO CUMPLES CON ESTAS OPCIONES, ESTÁS
COMETIENDO UNA VIOLACIÓN DE DERECHOS DE AUTOR.

================================================================================
CRÉDITOS OBLIGATORIOS (PARA USOS AUTORIZADOS)
================================================================================

CUALQUIER USO LEGALMENTE AUTORIZADO DEBE INCLUIR VISIBLEMENTE:

    DESARROLLADO, CREADO Y FUNDADO POR:
    Angel Manuel Guevara Chavarría
    N.O.E. - Núcleo Ofimático Educativo
    © 2021-2026 TODOS LOS DERECHOS RESERVADOS
    https://noe-ong.vercel.app/

ESTOS CRÉDITOS DEBEN PERMANECER VISIBLES, INTACTOS Y LEGIBLES EN TODA
IMPLEMENTACIÓN, SIN MODIFICACIONES, OCULTAMIENTOS NI ALTERACIONES.

================================================================================
ADVERTENCIA A INSPECTORES DE CÓDIGO (DEVTOOLS)
================================================================================

SI ESTÁS LEYENDO ESTO PORQUE ABRISTE LAS HERRAMIENTAS DE DESARROLLADOR (F12)
O INSPECCIONASTE EL CÓDIGO FUENTE:

1.  RECONOCES que este código es propiedad intelectual protegida
2.  ACEPTAS que la inspección es SOLO para fines educativos personales
3.  TE COMPROMETES a NO copiar, usar, distribuir o modificar este código
4.  ENTIENDES que cualquier uso no autorizado será perseguido legalmente
5.  CONFIRMAS que NO tienes autorización implícita para usar este código
6.  DECLARAS que has leído y comprendido este documento legal
7.  ACEPTAS que este comentario constituye NOTIFICACIÓN LEGAL FORMAL
8.  RECONOCES que ignorar esta advertencia NO te exime de responsabilidad
9.  CONFIRMAS que no tienes excusa de "desconocimiento" de la protección
10. ACEPTAS que este documento tiene validez legal en tu jurisdicción

LA MERA PRESENCIA DE ESTE COMENTARIO CONSTITUYE NOTIFICACIÓN LEGAL VINCULANTE.
"NO LEÍ EL COMENTARIO" NO ES UNA DEFENSA VÁLIDA EN NINGÚN TRIBUNAL.

================================================================================
CONTACTO PARA LICENCIAS Y AUTORIZACIONES
================================================================================

PARA SOLICITAR LICENCIA O AUTORIZACIÓN DE USO:

    Sitio Oficial: https://noe-ong.vercel.app/
    Autor: Angel Manuel Guevara Chavarría
    Propiedad: N.O.E. - Núcleo Ofimático Educativo
    Registro: Propiedad Intelectual Registrada © 2021-2026

SOLO SE OTORGARÁN LICENCIAS MEDIANTE CONTRATO ESCRITO FIRMADO.

================================================================================
ÚLTIMA ACTUALIZACIÓN LEGAL: 2026
VERSIÓN DEL DOCUMENTO: 3.0
ESTADO: PROTECCIÓN LEGAL ACTIVA - TODOS LOS DERECHOS RESERVADOS
================================================================================
-->


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="YWzhEHRSvJA8Ir3dWm4F6WdNNgrjFeTZxsuJ07OU7t0" />
    <title>N.O.E. | Videos</title>
    <meta name="description" content="Plataforma de alta especialización en Ofimática Avanzada, Sistemas y Desarrollo. Domina Microsoft Office 2024, VBA, Access y más con el ecosistema N.O.E. Fundado por Angel Manuel Guevara Chavarría.">
    <meta name="author" content="Angel Manuel Guevara Chavarría">
    <meta name="keywords" content="N.O.E., Angel Manuel Guevara Chavarría, Núcleo Ofimático Educativo, automatización, software educativo, Visio, Excel, programación, desarrollo web, VBA, Access">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#000000">
    <meta property="og:title" content="N.O.E. | Videos">
    <meta property="og:description" content="Formación de élite en ofimática y desarrollo de software. Creado por el Técnico Angel Manuel Guevara Chavarría.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://nucleoofimaticoeducativo.com/videos/">
    <meta property="og:image" content="N.O.E.png">
    <meta property="og:site_name" content="N.O.E. - Angel Manuel Guevara Chavarría">
    <link rel="icon" href="https://img.icons8.com/fluency/48/microsoft.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Angel Manuel Guevara Chavarría",
  "jobTitle": "Técnico Desarrollador y Fundador",
  "url": "https://nucleoofimaticoeducativo.com/videos/",
  "description": "Técnico especializado en automatización, desarrollo de software educativo y fundador del Núcleo Ofimático Educativo (N.O.E.).",
  "brand": {
    "@type": "Organization",
    "name": "N.O.E. - Núcleo Ofimático Educativo",
    "url": "https://nucleoofimaticoeducativo.com/",
    "sameAs": [
      "https://nucleoofimaticoeducativo.com/",
      "https://nucleoofimaticoeducativo.com/carnet/",
      "https://nucleoofimaticoeducativo.com/cuadernos/",
      "https://nucleoofimaticoeducativo.com/escuelas/",
      "https://nucleoofimaticoeducativo.com/instituciones/",
      "https://nucleoofimaticoeducativo.com/librero/",
      "https://nucleoofimaticoeducativo.com/plataforma/",
      "https://nucleoofimaticoeducativo.com/privado/",
      "https://nucleoofimaticoeducativo.com/publico/",
      "https://nucleoofimaticoeducativo.com/sobre-mi/",
      "https://nucleoofimaticoeducativo.com/videos/",
      "https://nucleoofimaticoeducativo.com/academias/",
      "https://nucleoofimaticoeducativo.com/calendario/"
    ]
  }
}
</script>
</head>
<body>
    
    <div class="noe-stealth-bg"></div>
    <header class="noe-header-sticky">
        <nav class="noe-nav-container">
            <div class="noe-logo-area">
                <span class="noe-logo-text">N.O.E.</span>
                <span class="noe-logo-sub">Núcleo Ofimático Educativo</span>
            </div>
<a href="https://nucleoofimaticoeducativo.com" class="noe-btn-back">
    <i class="fa-solid fa-arrow-left-long"></i> Regresar
</a>
        </nav>
    </header>

    <main class="noe-master-wrapper">
        <section class="noe-registry-terminal-section">
        <section class="noe-registry-terminal-section">
            <div id="clock"></div>
            <div class="noe-terminal-header">
                <i class="fa-solid fa-clock noe-terminal-icon"></i>
                <div class="noe-terminal-title-block">
                    <h1 class="noe-terminal-title">Secuencia de Activación</h1>
                    <h1 class="noe-terminal-title">Videos</h1>
                    <p class="noe-terminal-subtitle">Carga de Protocolos Finales en curso...</p>
                </div>
            </div>
                <div class="noe-terminal-column countdown-panel">
                    <div class="noe-panel-header">
                        <span class="noe-panel-tag">TEMPORIZADOR DEL SISTEMA</span>
                    </div>
                    <div id="countdown" class="noe-countdown-display">
                        <div class="time-box"><span id="days">00</span><small>Días</small></div>
                        <div class="time-box"><span id="hours">00</span><small>Hrs</small></div>
                        <div class="time-box"><span id="minutes">00</span><small>Min</small></div>
                        <div class="time-box"><span id="seconds">00</span><small>Seg</small></div>
                    </div>
                    <p class="noe-modal-text" style="margin-top: 30px; text-align: center;">
                        El núcleo estará operativo para la adquisición de datos el próximo <strong>01 de Septiembre</strong>. Mantente atento a la frecuencia.
                    </p>
                </div>
        </section>
<section class="noe-visio-hub" id="visio">
    <div class="visio-content-wrapper">
        <div class="img-video-logo">
            <img src="https://img.icons8.com/?size=100&id=NAUAHKddarlE&format=png&color=000000" alt="Visio" width="80" height="80" class="visio-icon-small">
            <h2 class="visio-title">Microsoft Visio</h2>
        </div>
        <p class="visio-desc">Motor de visualización técnica y diagramación inteligente integrado en tu ecosistema.</p>

        <div class="visio-btn-grid" id="visioBtnGrid">
            <button class="visio-btn activated" data-category="red">Red</button>
            <button class="visio-btn" data-category="flujo">Diagramas de flujo</button>
            <button class="visio-btn" data-category="software">Software</button>
            <button class="visio-btn" data-category="educacion">Educación</button>
            <button class="visio-btn" data-category="empresa">Empresa</button>
            <button class="visio-btn" data-category="db">Base de datos</button>
            <button class="visio-btn" data-category="planos">Planos de planta</button>
        </div>
        <div id="videoContainer" class="video-grid-container"></div>
    </div>
</section>
<section class="noe-ppt-hub" id="powerpoint">
    <div class="ppt-content-wrapper">
        <div class="ppt-img-video-logo">
            <img src="https://img.icons8.com/?size=100&id=h5aGExIW8Uft&format=png&color=000000" width="80" height="80" class="ppt-icon-small">
            <h2 class="ppt-title">Microsoft PowerPoint</h2>
        </div>
        <p class="ppt-desc">Crea presentaciones dinámicas, animaciones fluidas y narrativas visuales impactantes.</p>
        <div class="ppt-btn-grid" id="pptBtnGrid">
            <button class="ppt-btn activated" data-category="presentaciones">PRESENTACIONES</button>
            <button class="ppt-btn" data-category="temas">TEMAS</button>
            <button class="ppt-btn" data-category="educacion">EDUCACIÓN</button>
            <button class="ppt-btn" data-category="graficos">GRÁFICOS</button>
            <button class="ppt-btn" data-category="diagramas">DIAGRAMAS</button>
            <button class="ppt-btn" data-category="empresa">EMPRESA</button>
            <button class="ppt-btn" data-category="infografia">INFOGRAFÍA</button>
        </div>
        <div id="pptVideoContainer" class="ppt-video-grid-container"></div>
    </div>
</section>
<section class="noe-proj-hub" id="project">
    <div class="proj-content-wrapper">
        <div class="proj-img-video-logo">
            <img src="https://img.icons8.com/?size=100&id=7lJtplrxEIbD&format=png&color=000000" width="80" height="80" class="proj-icon-small">
            <h2 class="proj-title">Microsoft Project</h2>
        </div>
        <p class="proj-desc">Planifica, ejecuta y gestiona proyectos complejos con herramientas de programación avanzadas.</p>
        <div class="proj-btn-grid" id="projBtnGrid">
            <button class="proj-btn activated" data-category="proyectos">PROYECTOS</button>
            <button class="proj-btn" data-category="programaciones">PROGRAMACIONES</button>
            <button class="proj-btn" data-category="analisis">ANÁLISIS</button>
            <button class="proj-btn" data-category="sector">SECTOR</button>
            <button class="proj-btn" data-category="empresa">EMPRESA</button>
            <button class="proj-btn" data-category="tecnologia">TECNOLOGÍA</button>
            <button class="proj-btn" data-category="marketing">MARKETING</button>
        </div>
        <div id="projVideoContainer" class="proj-video-grid-container"></div>
    </div>
</section>
<section class="noe-acc-hub" id="access">
    <div class="acc-content-wrapper">
        <div class="acc-img-video-logo">
            <img src="https://img.icons8.com/?size=100&id=JdOSrU3pawBf&format=png&color=000000" alt="Access" width="80" height="80" class="acc-icon-small">
            <h2 class="acc-title">Microsoft Access</h2>
        </div>
        <p class="acc-desc">Diseña y gestiona bases de datos relacionales potentes con formularios e informes intuitivos.</p>
        <div class="acc-btn-grid" id="accBtnGrid">
            <button class="acc-btn activated" data-category="basedatos">BASE DE DATOS</button>
            <button class="acc-btn" data-category="empresa">EMPRESA</button>
            <button class="acc-btn" data-category="registros">REGISTROS</button>
            <button class="acc-btn" data-category="sector">SECTOR</button>
            <button class="acc-btn" data-category="listas">LISTAS</button>
            <button class="acc-btn" data-category="personal">PERSONAL</button>
            <button class="acc-btn" data-category="contactos">CONTACTOS</button>
        </div>
        <div id="accVideoContainer" class="acc-video-grid-container"></div>
    </div>
</section>
<section class="noe-word-hub" id="word">
    <div class="word-content-wrapper">
        <div class="word-img-video-logo">
            <img src="https://img.icons8.com/?size=100&id=u6yosU9wHn5s&format=png&color=000000" alt="Word" width="80" height="80" class="word-icon-small">
            <h2 class="word-title">Microsoft Word</h2>
        </div>
        <p class="word-desc">Crea documentos profesionales, formatos atractivos y contenido impactante con facilidad.</p>
        <div class="word-btn-grid" id="wordBtnGrid">
            <button class="word-btn activated" data-category="empresa">EMPRESA</button>
            <button class="word-btn" data-category="tarjetas">TARJETAS</button>
            <button class="word-btn" data-category="prospectos">PROSPECTOS</button>
            <button class="word-btn" data-category="cartas">CARTAS</button>
            <button class="word-btn" data-category="educacion">EDUCACIÓN</button>
            <button class="word-btn" data-category="curriculos">CURRÍCULOS Y CARTAS DE PRESENTACIÓN</button>
            <button class="word-btn" data-category="vacaciones">VACACIONES</button>
        </div>
        <div id="wordVideoContainer" class="word-video-grid-container"></div>
    </div>
</section>
<section class="noe-exc-hub" id="excel">
    <div class="exc-content-wrapper">
        <div class="exc-img-video-logo">
            <img src="https://img.icons8.com/?size=100&id=JChkA69vF7Lo&format=png&color=000000" alt="Excel" width="80" height="80" class="exc-icon-small">
            <h2 class="exc-title">Microsoft Excel</h2>
        </div>
        <p class="exc-desc">Domina hojas de cálculo, análisis de datos, fórmulas avanzadas y visualización profesional.</p>
        <div class="exc-btn-grid" id="excBtnGrid">
            <button class="exc-btn activated" data-category="empresa">EMPRESA</button>
            <button class="exc-btn" data-category="personal">PERSONAL</button>
            <button class="exc-btn" data-category="planificadores">PLANIFICADORES Y OBJETOS DE SEGUIMIENTO</button>
            <button class="exc-btn" data-category="listas">LISTAS</button>
            <button class="exc-btn" data-category="presupuestos">PRESUPUESTOS</button>
            <button class="exc-btn" data-category="graficos">GRÁFICOS</button>
            <button class="exc-btn" data-category="calendarios">CALENDARIOS</button>
        </div>
        <div id="excVideoContainer" class="exc-video-grid-container"></div>
    </div>
</section>
<section class="noe-code-hub" id="code">
    <div class="code-content-wrapper">
        <div class="code-img-video-logo">
            <img src="https://img.icons8.com/?size=100&id=0OQR1FYCuA9f&format=png&color=000000" alt="Códigos" width="80" height="80" class="code-icon-small">
            <h2 class="code-title">Tecnologías y Lenguajes</h2>
        </div>
        <p class="code-desc">Lenguajes de programación y automatización que potencian el ecosistema Microsoft y más allá.</p>
        <div class="code-btn-grid" id="codeBtnGrid">
            <button class="code-btn activated" data-category="vba">VBA</button>
            <button class="code-btn" data-category="javascript">JAVASCRIPT</button>
            <button class="code-btn" data-category="sql">SQL</button>
            <button class="code-btn" data-category="python">PYTHON</button>
            <button class="code-btn" data-category="powerfx">POWER FX</button>
            <button class="code-btn" data-category="html">HTML/CSS</button>
            <button class="code-btn" data-category="powershell">POWERSHELL</button>
        </div>
        <div id="codeVideoContainer" class="code-video-grid-container"></div>
    </div>
</section>
        </section>
    </main>
        <section class="noe-robot-canvas-section" id="fundador">
                <div class="noe-robot-viewport">
                    <div class="noe-friendly-bot" id="noe-interactive-bot">
                        <div class="noe-bot-antenna"></div>
                        <div class="noe-bot-head">
                            <div class="noe-bot-face">
                                <div class="noe-bot-eyes">
                                    <div class="noe-bot-eye left"></div>
                                    <div class="noe-bot-eye right"></div>
                                </div>
                                <div class="noe-bot-smile"></div>
                            </div>
                        </div>
                        <div class="noe-bot-body">
                            <div class="noe-bot-chest-plate"></div>
                        </div>
                        <div class="noe-bot-cane"></div>
                        <div class="noe-bot-wheel"></div>
                    </div>
                    <div class="noe-bot-floor-shadow"></div>
                </div>
            </section>
        <footer class="noe-god-footer">
            <p>N.O.E.&reg; 2021 - 2026 | Todos los Derechos Reservados<br>
                Desarrollado - Creado y Fundado por Angel Manuel Guevara Chavarría
            </p>
        </footer>
<div class="legal-disclaimer" id="legal">
    <p class="legal-text">
        ESTE SITIO WEB NO ESTÁ RELACIONADO, AFILIADO, NI ENDOSADO DE NINGUNA MANERA CON MICROSOFT CORPORATION. 
        TODOS LOS NOMBRES DE PRODUCTOS, LOGOTIPOS Y MARCAS COMERCIALES MENCIONADOS (VISIO, POWERPOINT, PROJECT, 
        ACCESS, WORD, EXCEL, VBA, ETC.) SON PROPIEDAD DE SUS RESPECTIVOS DUEÑOS Y SE UTILIZAN ÚNICAMENTE CON 
        FINES EDUCATIVOS E INFORMATIVOS. EL USO DE ESTOS NOMBRES NO IMPLICA NINGUNA AFINIDAD O PATROCINIO POR PARTE DE MICROSOFT.
    </p>
</div>
<div class="floating-sidebar">
    <a href="#clock" class="sidebar-btn" title="Temporizador">
        <i class="fa-solid fa-clock"></i>
    </a>
    <a href="#visio" class="sidebar-btn" title="Microsoft Visio">
        <img src="https://img.icons8.com/?size=100&id=NAUAHKddarlE&format=png&color=000000" width="65%">
    </a>
    <a href="#powerpoint" class="sidebar-btn" title="Microsoft PowerPoint">
        <img src="https://img.icons8.com/?size=100&id=h5aGExIW8Uft&format=png&color=000000" width="65%">
    </a>
    <a href="#project" class="sidebar-btn" title="Microsoft Project">
        <img src="https://img.icons8.com/?size=100&id=7lJtplrxEIbD&format=png&color=000000" width="65%">
    </a>
    <a href="#access" class="sidebar-btn" title="Microsoft Access">
        <img src="https://img.icons8.com/?size=100&id=JdOSrU3pawBf&format=png&color=000000" width="65%">
    </a>
    <a href="#word" class="sidebar-btn" title="Microsoft Word">
        <img src="https://img.icons8.com/?size=100&id=u6yosU9wHn5s&format=png&color=000000" width="65%">
    </a>
    <a href="#excel" class="sidebar-btn" title="Microsoft Excel">
        <img src="https://img.icons8.com/?size=100&id=JChkA69vF7Lo&format=png&color=000000" width="65%">
    </a>
    <a href="#code" class="sidebar-btn" title="Tecnologías y Lenguajes">
        <img src="https://img.icons8.com/?size=100&id=0OQR1FYCuA9f&format=png&color=000000" width="65%">
    </a>
    <a href="#legal" class="sidebar-btn" title="No soy de Microsoft">
        <img src="https://img.icons8.com/?size=100&id=uEo5JjZqbEr6&format=png&color=000000" width="65%">
    </a>
</div>
<script src="script.js"></script>
<div id="security-alert" class="security-alert">
    <div class="alert-icon">
        <svg viewBox="0 0 24 24" width="120" height="120" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M12 2L2 22h20L12 2z" stroke-linejoin="round"/>
            <line x1="12" y1="9" x2="12" y2="13" stroke-width="2"/>
            <circle cx="12" cy="17" r="2" fill="currentColor"/>
        </svg>
    </div>
</div>
    <div class="screen-warning">
        <div class="warning-content">
            <h1>AVISO IMPORTANTE</h1>
            <p>Para que puedas visualizar el contenido, actualmente las pantallas de <strong>teléfonos</strong> no están permitidas.</p>
            <p>Por favor, visualiza esta página en un monitor o laptop.</p>
            <div class="resize-icon">Téc. Angel Manuel Guevara Chavarría</div>
            <div class="resize-icon1">Desarrollador, Creador y Fundador de</div>
            <div class="resize-icon2">N.O.E. | Núcloe Ofimático Educativo&reg; 2021 - 2026 | Todos los derechos reservados.</div>
                    <section class="noe-robot-canvas-section">
                <div class="noe-robot-viewport">
                    <div class="noe-friendly-bot" id="noe-interactive-bot">
                        <div class="noe-bot-antenna"></div>
                        <div class="noe-bot-head">
                            <div class="noe-bot-face">
                                <div class="noe-bot-eyes">
                                    <div class="noe-bot-eye left"></div>
                                    <div class="noe-bot-eye right"></div>
                                </div>
                                <div class="noe-bot-smile"></div>
                            </div>
                        </div>
                        <div class="noe-bot-body">
                            <div class="noe-bot-chest-plate"></div>
                        </div>
                        <div class="noe-bot-cane"></div>
                        <div class="noe-bot-wheel"></div>
                    </div>
                    <div class="noe-bot-floor-shadow"></div>
                </div>
            </section>
        </div>
    </div>
</body>
</html>