<!DOCTYPE html>
<html lang="es">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7TDKNG6VNL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-7TDKNG6VNL');
</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="icon.png" type="image/png">
  <!-- SEO Estándar -->
  <meta name="description" content="Enfermero.cl — Plataforma de HealthTech e Inteligencia Artificial Clínica. SENTINEL, NurseCopilot y ESI AI Assistant para la salud digital del mañana.">
  <meta name="author" content="Alex Arroyo Rifo">
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
  <link rel="canonical" href="https://enfermero.cl/index.php">

  <!-- Open Graph / Meta de Redes Sociales (RRSS) -->
  <meta property="og:locale" content="es_ES">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Enfermero.cl — HealthTech &amp; IA Clínica">
  <meta property="og:description" content="Enfermero.cl — Plataforma de HealthTech e Inteligencia Artificial Clínica. SENTINEL, NurseCopilot y ESI AI Assistant para la salud digital del mañana.">
  <meta property="og:url" content="https://enfermero.cl/index.php">
  <meta property="og:site_name" content="Enfermero.cl">
<meta property="og:image" content="https://enfermero.cl/img/blog.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:type" content="image/webp">

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Enfermero.cl — HealthTech &amp; IA Clínica">
  <meta name="twitter:description" content="Enfermero.cl — Plataforma de HealthTech e Inteligencia Artificial Clínica. SENTINEL, NurseCopilot y ESI AI Assistant para la salud digital del mañana.">
<meta property="og:image" content="https://enfermero.cl/img/blog.jpg">

  <title>Enfermero.cl — HealthTech &amp; IA Clínica</title>

  <!-- Google Fonts -->
  <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=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">

  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <!-- Estilos Globales y Compartidos -->
  <link rel="stylesheet" href="mani.css">
  
  <!-- Estilos Específicos de la Página -->
    <link rel="stylesheet" href="home.css">
  </head>

<body>

  <header class="site-header" role="banner">
    <div class="container">
      <div class="header-inner">
        <a href="/index.php" class="logo" aria-label="Enfermero.cl — Inicio">
          <div class="logo__mark" aria-hidden="true">
            <img src="logo.webp" alt="Logo Enfermero.cl">
          </div>
          <div class="logo__textblock">
            <div class="logo__name">Enfermero<em>.cl</em></div>
            <div class="logo__sub">HealthTech &amp; IA Clínica</div>
          </div>
        </a>

        <nav class="nav-primary" aria-label="Navegación principal">
          <a href="/index.php" class="active">Inicio</a>
          <a href="/blog.php" class="">Blog</a>
          <a href="/about.php" class="">Nosotros</a>
          <a href="https://sentinel.enfermero.cl" target="_blank" rel="noopener">SENTINEL</a>
          <a href="https://copilot.enfermero.cl" target="_blank" rel="noopener">NURSE-COPILOT</a>
          <a href="https://esi.enfermero.cl" target="_blank" rel="noopener">ESI</a>
        </nav>

        <div class="header-actions">
          <a href="/about.php#contacto" class="btn btn--ghost">Contacto</a>
        <!--  <a href="https://sentinel.enfermero.cl" class="btn btn--primary" target="_blank" rel="noopener">Comenzar <i class="fa-solid fa-arrow-right"></i></a>-->
          <button class="hamburger" aria-label="Abrir menú" aria-expanded="false">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </div>
  </header>

  <nav class="mobile-nav" aria-label="Menú móvil">
    <span class="mobile-nav__label">Plataforma</span>
    <a href="/index.php" class="active">Inicio</a>
    <a href="/blog.php" class="">Blog</a>
    <a href="/about.php" class="">Nosotros</a>
    <div class="mobile-nav__divider"></div>
    <span class="mobile-nav__label">Productos IA</span>
    <a href="https://sentinel.enfermero.cl" target="_blank" rel="noopener"><i class="fa-solid fa-bolt"></i> SENTINEL</a>
    <a href="https://copilot.enfermero.cl" target="_blank" rel="noopener"><i class="fa-solid fa-robot"></i> NurseCopilot</a>
    <a href="https://esi.enfermero.cl" target="_blank" rel="noopener"><i class="fa-solid fa-hospital"></i> ESI AI Assistant</a>
    <div class="mobile-nav__divider"></div>
    <a href="/about.php#contacto">Contacto</a>
  </nav>
  <!-- ── FIN HEADER ── -->

<!-- =========================================================
       HERO — Living Neural Background
       ========================================================= -->
  <section class="hero" aria-label="Hero principal">
    <canvas id="neural-canvas" aria-hidden="true"></canvas>
    <div class="hero__vignette" aria-hidden="true"></div>
    <div class="hero__bottom-fade" aria-hidden="true"></div>

    <div class="container">
      <div class="hero__inner">
        <div class="hero__content">
          <div class="hero__eyebrow">
            <span class="dot" aria-hidden="true"></span>
            HealthTech · IA Clínica · Tiempo Real
          </div>

          <h1 class="hero__headline">
            Inteligencia Artificial<br>
            al Servicio de la<br>
            <span class="accent">Salud Clínica</span>
          </h1>

          <p class="hero__sub">
            Herramientas digitales de próxima generación para enfermeros y equipos de salud.
            Vigilancia en tiempo real, soporte clínico con IA y triaje aumentado.
          </p>

          <div class="hero__actions">
            <a href="#products" class="btn btn--primary btn--lg">Ver los Productos <i class="fa-solid fa-arrow-right"></i></a>
            <a href="about.php" class="btn btn--ghost-white btn--lg">Quiénes somos</a>
          </div>

          <div class="hero__trust">
            <span class="hero__trust-label">Construido sobre:</span>
            <div class="hero__trust-items">
              <span class="hero__trust-item"><span class="icon"><i class="fa-solid fa-brain"></i></span> IA Generativa (RAG)</span>
              <span class="hero__trust-item"><span class="icon"><i class="fa-solid fa-bolt"></i></span> Tiempo Real</span>
              <span class="hero__trust-item"><span class="icon"><i class="fa-solid fa-hospital"></i></span> Taxonomía NANDA</span>
              <span class="hero__trust-item"><span class="icon"><i class="fa-solid fa-lock"></i></span> Entorno Sanitario</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- =========================================================
       STATS STRIP
       ========================================================= -->
  <section class="stats-strip" aria-label="Métricas clave">
    <div class="container">
      <div class="stats-grid">
        <div class="stat-item reveal">
          <div class="stat-item__value"><i class="fa-solid fa-bolt"></i> 650<em>+</em></div>
          <div class="stat-item__label">Pacientes en vigilancia</div>
        </div>
        <div class="stat-item reveal reveal-delay-1">
          <div class="stat-item__value"><i class="fa-solid fa-robot"></i> 122<em>+</em></div>
          <div class="stat-item__label"> Dispositivos Instalados</div>
        </div>
        <div class="stat-item reveal reveal-delay-2">
          <div class="stat-item__value"><i class="fa-solid fa-hospital"></i> 956<em>+</em></div>
          <div class="stat-item__label">Pacientes Categorizados con IA</div>
        </div>
        <div class="stat-item reveal reveal-delay-3">
          <div class="stat-item__value"><i class="fa-solid fa-brain"></i> 5</div>
          <div class="stat-item__label">Agentes de IA funcionando 24/7</div>
        </div>
      </div>
    </div>
  </section>

  <!-- =========================================================
       PRODUCTS — BENTO GRID
       ========================================================= -->
  <section class="products-section" id="products" aria-labelledby="products-heading">
    <div class="container">
      <div class="products-header reveal">
        <div class="section-eyebrow">Productos Estrella</div>
        <h2 class="section-heading section-heading--lg" id="products-heading">
          Tres herramientas.<br>Un ecosistema clínico.
        </h2>
        <p class="section-sub">
          Cada producto resuelve un problema crítico del flujo clínico, con IA embebida, interfaces pensadas para urgencias y arquitectura modular que escala con tu institución.
        </p>
      </div>

      <div class="bento-grid">

        <!-- ── SENTINEL ── -->
        <article class="product-card product-card--sentinel reveal" aria-labelledby="sentinel-name">
          <div>
            <div class="product-badge product-badge--sentinel">
              <span class="badge-dot"></span>
              Vigilancia · Tiempo Real
            </div>
          </div>

          <div style="display:flex; align-items:center; gap:1rem;">
            <div class="product-icon product-icon--sentinel" aria-hidden="true"><i class="fa-solid fa-bolt"></i></div>
            <div>
              <h3 class="product-name" id="sentinel-name">SENTINEL</h3>
              <div style="font-size:0.78rem; color:var(--clr-muted);">sentinel.enfermero.cl</div>
            </div>
          </div>

          <p class="product-desc">
            Motor digital multiprotocolo para la vigilancia en tiempo real de bundles de IAAS y seguridad del paciente. Alertas automáticas, dashboards clínicos y trazabilidad total de protocolos.
          </p>

          <!-- Live preview simulation -->
          <div class="product-preview">
            <div class="product-preview__bar">
              <div class="product-preview__dot" style="background:#ef4444;"></div>
              <div class="product-preview__dot" style="background:#f59e0b;"></div>
              <div class="product-preview__dot" style="background:#22c55e;"></div>
              <span style="margin-left:6px; font-size:0.65rem; color:var(--clr-muted);">sentinel.enfermero.cl — Dashboard</span>
            </div>
            <div class="product-preview__body">
              <div class="sentinel-preview__row">
                <div class="sentinel-preview__status status-red"></div>
                <div class="sentinel-preview__text">Bundle CVC — Cama 12B</div>
                <div class="sentinel-preview__val" style="color:#ef4444;">ALERTA</div>
              </div>
              <div class="sentinel-preview__row">
                <div class="sentinel-preview__status status-amber"></div>
                <div class="sentinel-preview__text">Higiene de Manos — UCI</div>
                <div class="sentinel-preview__val" style="color:#f59e0b;">78%</div>
              </div>
              <div class="sentinel-preview__row">
                <div class="sentinel-preview__status status-green"></div>
                <div class="sentinel-preview__text">Bundle VM — Cama 7A</div>
                <div class="sentinel-preview__val" style="color:#22c55e;">OK</div>
              </div>
            </div>
          </div>

          <ul class="product-features">
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Alertas en tiempo real por incumplimiento de bundles
            </li>
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Trazabilidad de IAAS multiprotocolo
            </li>
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Dashboard por unidad clínica y turno
            </li>
          </ul>

          <div class="product-card__footer">
            <a href="https://sentinel.enfermero.cl" target="_blank" rel="noopener" class="product-link">
              Acceder a SENTINEL <span class="arrow"><i class="fa-solid fa-arrow-right"></i></span>
            </a>
            <span class="product-badge product-badge--sentinel" style="font-size:0.62rem;">Free</span>
          </div>
        </article>

        <!-- ── NURSECOPILOT ── -->
        <article class="product-card product-card--copilot reveal reveal-delay-1" aria-labelledby="copilot-name">
          <div>
            <div class="product-badge product-badge--copilot">
              <span class="badge-dot"></span>
              Agente IA · NANDA · RAG
            </div>
          </div>

          <div style="display:flex; align-items:center; gap:1rem;">
            <div class="product-icon product-icon--copilot" aria-hidden="true"><i class="fa-solid fa-robot"></i></div>
            <div>
              <h3 class="product-name" id="copilot-name">NurseCopilot</h3>
              <div style="font-size:0.78rem; color:var(--clr-muted);">copilot.enfermero.cl</div>
            </div>
          </div>

          <p class="product-desc">
            Agente clínico de IA basado en RAG con taxonomía NANDA. Optimiza el caos clínico: diagnósticos enfermeros, planes de cuidado y decisiones críticas bajo presión asistencial real.
          </p>

          <!-- Chat preview -->
          <div class="product-preview">
            <div class="product-preview__bar">
              <div class="product-preview__dot" style="background:#ef4444;"></div>
              <div class="product-preview__dot" style="background:#f59e0b;"></div>
              <div class="product-preview__dot" style="background:#22c55e;"></div>
              <span style="margin-left:6px; font-size:0.65rem; color:var(--clr-muted);">NurseCopilot — Agente Clínico</span>
            </div>
            <div class="product-preview__body">
              <div class="chat-bubble chat-bubble--user">
                Paciente con SpO₂ 88%, FC 118, agitación. ¿Diagnóstico prioritario?
              </div>
              <div class="chat-bubble chat-bubble--ai">
                <strong>NANDA: Deterioro del intercambio gaseoso</strong> (00030).
                Relacionado con desequilibrio V/Q. Acción inmediata: O₂ en mascarilla 10L/min, posición Fowler, monitorización continua.
                <br><span class="chat-tag">Taxonomía NANDA · RAG</span>
              </div>
            </div>
          </div>

          <ul class="product-features">
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Diagnósticos NANDA en segundos con evidencia
            </li>
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Generación de PAE completo asistida por IA
            </li>
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Contexto clínico persistente por paciente
            </li>
          </ul>

          <div class="product-card__footer">
            <a href="https://copilot.enfermero.cl" target="_blank" rel="noopener" class="product-link">
              Probar NurseCopilot <span class="arrow"><i class="fa-solid fa-arrow-right"></i></span>
            </a>
            <span class="product-badge product-badge--copilot" style="font-size:0.62rem;">Nuevo</span>
          </div>
        </article>

        <!-- ── ESI AI ASSISTANT ── -->
        <article class="product-card product-card--esi reveal reveal-delay-2" aria-labelledby="esi-name">
          <div>
            <div class="product-badge product-badge--esi">
              <span class="badge-dot"></span>
              Triage · Urgencias Adulto
            </div>
          </div>

          <div style="display:flex; align-items:center; gap:1rem;">
            <div class="product-icon product-icon--esi" aria-hidden="true"><i class="fa-solid fa-hospital"></i></div>
            <div>
              <h3 class="product-name" id="esi-name">ESI AI Assistant</h3>
              <div style="font-size:0.78rem; color:var(--clr-muted);">esi.enfermero.cl</div>
            </div>
          </div>

          <p class="product-desc">
            Agente inteligente para soporte en el Triage de Urgencias Adulto basado en el protocolo Emergency Severity Index. Priorización estructurada, asistida por IA, en el momento crítico.
          </p>

          <!-- ESI triage preview -->
          <div class="product-preview">
            <div class="product-preview__bar">
              <div class="product-preview__dot" style="background:#ef4444;"></div>
              <div class="product-preview__dot" style="background:#f59e0b;"></div>
              <div class="product-preview__dot" style="background:#22c55e;"></div>
              <span style="margin-left:6px; font-size:0.65rem; color:var(--clr-muted);">ESI AI — Clasificador de Triage</span>
            </div>
            <div class="product-preview__body">
              <div style="font-size:0.68rem; color:var(--clr-muted); margin-bottom:8px; font-weight:600; letter-spacing:0.05em;">ESCALA ESI — NIVELES DE PRIORIDAD</div>
              <div class="esi-levels">
                <div class="esi-level esi-l1" title="Nivel 1 — Resucitación"></div>
                <div class="esi-level esi-l2" title="Nivel 2 — Emergencia"></div>
                <div class="esi-level esi-l3" title="Nivel 3 — Urgente"></div>
                <div class="esi-level esi-l4" title="Nivel 4 — Menos urgente"></div>
                <div class="esi-level esi-l5" title="Nivel 5 — No urgente"></div>
              </div>
              <div class="esi-decision-block">
                <div class="esi-decision-num">2</div>
                <div class="esi-decision-text">
                  Situación de Alto Riesgo
                  <span>Dolor torácico + diaforesis · Acción inmediata</span>
                </div>
              </div>
            </div>
          </div>

          <ul class="product-features">
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Soporte al triage ESI nivel 1-5 con IA
            </li>
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Flujo de preguntas clínicas guiado
            </li>
            <li class="product-feature">
              <span class="product-feature__check"><i class="fa-solid fa-check"></i></span>
              Registro y auditoría de clasificaciones
            </li>
          </ul>

          <div class="product-card__footer">
            <a href="https://esi.enfermero.cl" target="_blank" rel="noopener" class="product-link">
              Usar ESI AI Assistant <span class="arrow"><i class="fa-solid fa-arrow-right"></i></span>
            </a>
            <span class="product-badge product-badge--esi" style="font-size:0.62rem;">v2.0</span>
          </div>
        </article>

      </div><!-- /bento-grid -->
    </div>
  </section>

  <!-- =========================================================
       PILLARS — Dark section
       ========================================================= -->
  <section class="pillars-section" aria-labelledby="pillars-heading">
    <div class="container">
      <div class="pillars-intro">
        <div class="reveal">
          <div class="section-eyebrow" style="color:rgba(189,79,42,0.85);">Nuestra Filosofía</div>
          <h2 class="section-heading section-heading--lg" id="pillars-heading">
            Tecnología con<br>ADN Clínico
          </h2>
          <p class="section-sub">
            Cada herramienta nace de la práctica real de enfermería, no del laboratorio.
          </p>
        </div>
      </div>

      <div class="pillars-grid">
        <div class="pillar-card reveal">
          <div class="pillar-card__icon" aria-hidden="true"><i class="fa-solid fa-brain"></i></div>
          <h3 class="pillar-card__title">IA Aplicada</h3>
          <p class="pillar-card__text">Modelos adaptados a cada proceso clínico para agilizar decisiones, optimizar el triaje y automatizar seguimiento epidemiológico con lógica predictiva.</p>
        </div>
        <div class="pillar-card reveal reveal-delay-1">
          <div class="pillar-card__icon" aria-hidden="true"><i class="fa-solid fa-microscope"></i></div>
          <h3 class="pillar-card__title">Lógica Clínica Real</h3>
          <p class="pillar-card__text">Algoritmos y flujos diseñados desde la práctica real en pabellones y servicios de urgencias. No diseño técnico desconectado del terreno.</p>
        </div>
        <div class="pillar-card reveal reveal-delay-2">
          <div class="pillar-card__icon" aria-hidden="true"><i class="fa-solid fa-bolt"></i></div>
          <h3 class="pillar-card__title">UX para Urgencias</h3>
          <p class="pillar-card__text">Interfaces minimalistas, dinámicas y orientadas al flujo de trabajo bajo presión. Cada clic tiene un propósito; nada estorba en la pantalla.</p>
        </div>
        <div class="pillar-card reveal reveal-delay-3">
          <div class="pillar-card__icon" aria-hidden="true"><i class="fa-solid fa-satellite-dish"></i></div>
          <h3 class="pillar-card__title">Evolución Continua</h3>
          <p class="pillar-card__text">Proyectos en desarrollo activo: desde simuladores hasta sistemas complejos de gestión hospitalaria. Arquitectura modular que escala contigo.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- =========================================================
       CTA BANNER — ESI
       ========================================================= -->
  <section class="cta-banner" aria-label="Llamada a la acción — ESI AI">
    <div class="container">
      <div class="cta-banner__inner">
        <div class="cta-banner__text reveal">
          <div class="cta-banner__eyebrow">ESI AI Assistant · v2.0</div>
          <h2 class="cta-banner__heading">Optimiza el triaje clínico<br>con Inteligencia Artificial</h2>
          <p class="cta-banner__sub">
            Soporte a la decisión de triage en tiempo real. Basado en el protocolo Emergency Severity Index, diseñado para el contexto de urgencias adulto de Chile.
          </p>
        </div>
        <div class="cta-banner__actions reveal reveal-delay-2">
          <a href="https://esi.enfermero.cl" class="btn btn--primary btn--lg" target="_blank" rel="noopener">Probar Agente ESI <i class="fa-solid fa-arrow-right"></i></a>
          <a href="https://enfermero.cl/post/el-triage-del-futuro-es-rapido-y-consistente-presentamos-el-asistente-esi-impulsado-por-ia" class="btn btn--ghost-white">Leer más</a>
        </div>
      </div>
    </div>
  </section>

  <!-- =========================================================
       NEWS + SIDEBAR
       ========================================================= -->
  <section class="news-section" aria-labelledby="news-heading">
    <div class="container">
      <div class="news-layout">
        <!-- News Feed -->
        <div>
          <div class="news-header">
            <div class="reveal">
              <div class="section-eyebrow">Últimas Publicaciones</div>
              <h2 class="section-heading" style="font-size:1.75rem;" id="news-heading">
                Desde el Blog
              </h2>
            </div>
            <a href="/blog.php" class="btn btn--ghost btn--sm reveal reveal-delay-2" style="flex-shrink:0;">
              Ver todo el blog <i class="fa-solid fa-arrow-right"></i>
            </a>
          </div>

          <div class="news-grid">
            <article class="news-card reveal">
              <div class="news-card__thumb" aria-hidden="true"><i class="fa-solid fa-robot"></i></div>
              <div>
                <span class="news-card__cat">IA Aplicada</span>
                <a href="post/nursecopilot-conectando-ia-directamente-al-caos-clinico" class="news-card__title">NurseCopilot: conectando IA directamente al caos clínico</a>
                <div class="news-card__meta">mayo 24, 2026 · 4 min lectura</div>
              </div>
            </article>

            <article class="news-card reveal reveal-delay-1">
              <div class="news-card__thumb" aria-hidden="true"><i class="fa-solid fa-heart-pulse"></i></div>
              <div>
                <span class="news-card__cat">Biometría</span>
                <a href="post/del-oximetro-tradicional-a-la-biometria-por-ia" class="news-card__title">Del oxímetro tradicional a la biometría por IA</a>
                <div class="news-card__meta">mayo 10, 2026 · 5 min lectura</div>
              </div>
            </article>

            <article class="news-card reveal reveal-delay-2">
              <div class="news-card__thumb" aria-hidden="true"><i class="fa-solid fa-mobile-screen-button"></i></div>
              <div>
                <span class="news-card__cat">Apps</span>
                <a href="post/nanda-pocket-arma-tu-pae-completo-en-minutos" class="news-card__title">NANDA Pocket: arma tu PAE completo en minutos</a>
                <div class="news-card__meta">mayo 8, 2026 · 3 min lectura</div>
              </div>
            </article>
          </div>
        </div>

        <!-- Sidebar -->
        <aside aria-label="Barra lateral">
          <div class="sidebar-widget reveal">
            <div class="sidebar-widget__header">
              <span aria-hidden="true"><i class="fa-solid fa-lightbulb"></i></span>
              <span class="sidebar-widget__title">¿Sabías que...?</span>
            </div>
            <div class="sidebar-widget__body">
              <div class="quote-box">
                La programación es lógica aplicada; la enfermería también. La diferencia es que el output de una es código y el de la otra es vida.
                <div class="quote-source">— Alex Arroyo, Enfermero.cl</div>
              </div>
            </div>
          </div>

          <div class="sidebar-widget reveal reveal-delay-1" style="margin-top:16px;">
            <div class="sidebar-widget__header">
              <span aria-hidden="true"><i class="fa-solid fa-bullhorn"></i></span>
              <span class="sidebar-widget__title">Telegram</span>
            </div>
            <div class="sidebar-widget__body">
              <p style="font-size:0.85rem; color:var(--clr-muted); margin-bottom:12px; line-height:1.5;">Recibe novedades de IA, Salud Digital y Enfermería directamente en Telegram.</p>
              <a href="#" class="btn btn--primary" style="width:100%; justify-content:center;">@Enfermero.cl <i class="fa-solid fa-arrow-right"></i></a>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <!-- =========================================================
       SPOTIFY CTA
       ========================================================= -->
  <section class="spotify-cta" aria-label="Playlist RCP de Spotify">
    <div class="container">
      <div class="spotify-inner">
        <div class="spotify-brand reveal">
          <div class="spotify-icon" aria-hidden="true"><i class="fa-solid fa-music"></i></div>
          <div>
            <div class="spotify-text__label">Practica tu RCP con la ciencia del ritmo</div>
            <p class="spotify-text__sub">Nuestra playlist incluye el top 20 de canciones entre 100 y 120 BPM —la cadencia exacta para compresiones torácicas efectivas según AHA.</p>
          </div>
        </div>
        <a href="https://enfermero.cl/post/rcp-trainer" class="btn btn--spotify reveal reveal-delay-2" target="_blank" rel="noopener">
          <i class="fa-solid fa-play"></i> Ver Playlist en Spotify
        </a>
      </div>
    </div>
  </section>
<script>
  /**
   * ── NEURAL CANVAS PARTICLE SYSTEM ────────────────────────────
   * Webpack module: src/js/neural-bg.js
   *
   * Optimized vanilla JS using requestAnimationFrame.
   * Target: 60fps. No external libraries.
   * Features: particle mesh, mouse repulsion/attraction,
   *            data pulse waves, adaptive density by viewport.
   */
  (function NeuralBg() {
    'use strict';

    const canvas  = document.getElementById('neural-canvas');
    if (!canvas) return;

    const ctx     = canvas.getContext('2d');
    let W, H, particles, mouse = { x: -9999, y: -9999 }, animId;

    // ── Config ────────────────────────────────────────────────
    const CFG = {
      particleCount: () => Math.min(Math.floor((W * H) / 10000), 110),
      maxDist:        130,     // max connection distance (px)
      mouseRadius:    160,     // mouse influence radius
      mouseStrength:  0.022,   // attraction/repulsion force
      speed:          0.38,    // base movement speed
      sizeMin:        1.4,
      sizeMax:        3.2,
      // Color palette — clinic blues + coral accent
      colors: ['#1d6fa4', '#2a8fc9', '#0d2c54', '#bd4f2a', '#4db8f0'],
      pulseInterval:  3200,    // ms between data pulses
      pulseSpeed:     1.8,     // px per frame
      pulseMaxR:      220,
    };

    // ── Particle class ────────────────────────────────────────
    function Particle() {
      this.reset();
    }

    Particle.prototype.reset = function () {
      this.x  = Math.random() * W;
      this.y  = Math.random() * H;
      this.vx = (Math.random() - 0.5) * CFG.speed;
      this.vy = (Math.random() - 0.5) * CFG.speed;
      this.r  = CFG.sizeMin + Math.random() * (CFG.sizeMax - CFG.sizeMin);
      this.color = CFG.colors[Math.floor(Math.random() * CFG.colors.length)];
      this.alpha = 0.4 + Math.random() * 0.45;
      this.baseAlpha = this.alpha;
    };

    Particle.prototype.update = function () {
      // Mouse influence
      const dx = mouse.x - this.x;
      const dy = mouse.y - this.y;
      const dist = Math.sqrt(dx * dx + dy * dy);

      if (dist < CFG.mouseRadius) {
        const force = (1 - dist / CFG.mouseRadius) * CFG.mouseStrength;
        this.vx += dx * force;
        this.vy += dy * force;
      }

      // Dampen velocity to avoid acceleration runaway
      this.vx *= 0.985;
      this.vy *= 0.985;

      // Clamp speed
      const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
      if (speed > CFG.speed * 2.5) {
        const ratio = (CFG.speed * 2.5) / speed;
        this.vx *= ratio;
        this.vy *= ratio;
      }

      this.x += this.vx;
      this.y += this.vy;

      // Wrap around edges
      if (this.x < -10) this.x = W + 10;
      if (this.x > W + 10) this.x = -10;
      if (this.y < -10) this.y = H + 10;
      if (this.y > H + 10) this.y = -10;
    };

    // ── Pulse waves ───────────────────────────────────────────
    const pulses = [];

    function spawnPulse() {
      pulses.push({
        x: Math.random() * W,
        y: Math.random() * H,
        r: 0,
        alpha: 0.55,
        color: CFG.colors[Math.floor(Math.random() * CFG.colors.length)],
      });
    }

    function updatePulses() {
      for (let i = pulses.length - 1; i >= 0; i--) {
        const p = pulses[i];
        p.r     += CFG.pulseSpeed;
        p.alpha -= 0.0055;
        if (p.alpha <= 0 || p.r > CFG.pulseMaxR) {
          pulses.splice(i, 1);
          continue;
        }
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.strokeStyle = hexToRgba(p.color, p.alpha * 0.5);
        ctx.lineWidth = 1;
        ctx.stroke();
      }
    }

    // ── Init ──────────────────────────────────────────────────
    function init() {
      resize();
      particles = Array.from({ length: CFG.particleCount() }, () => new Particle());
      loop();
      setInterval(spawnPulse, CFG.pulseInterval);
    }

    function resize() {
      W = canvas.width  = canvas.offsetWidth;
      H = canvas.height = canvas.offsetHeight;
    }

    // ── Draw loop ─────────────────────────────────────────────
    function loop() {
      ctx.clearRect(0, 0, W, H);

      // Draw connections
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x;
          const dy = particles[i].y - particles[j].y;
          const d  = Math.sqrt(dx * dx + dy * dy);
          if (d < CFG.maxDist) {
            const opacity = (1 - d / CFG.maxDist) * 0.3;
            ctx.beginPath();
            ctx.moveTo(particles[i].x, particles[i].y);
            ctx.lineTo(particles[j].x, particles[j].y);
            ctx.strokeStyle = hexToRgba(particles[i].color, opacity);
            ctx.lineWidth = 0.6;
            ctx.stroke();
          }
        }
      }

      // Draw pulse waves
      updatePulses();

      // Draw & update particles
      particles.forEach(p => {
        p.update();
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = hexToRgba(p.color, p.alpha);
        ctx.fill();
      });

      animId = requestAnimationFrame(loop);
    }

    // ── Utility ───────────────────────────────────────────────
    function hexToRgba(hex, alpha) {
      const r = parseInt(hex.slice(1, 3), 16);
      const g = parseInt(hex.slice(3, 5), 16);
      const b = parseInt(hex.slice(5, 7), 16);
      return `rgba(${r},${g},${b},${alpha})`;
    }

    // ── Event listeners ───────────────────────────────────────
    const hero = document.querySelector('.hero');

    if (hero) {
      hero.addEventListener('mousemove', (e) => {
        const rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
      }, { passive: true });

      hero.addEventListener('mouseleave', () => {
        mouse.x = -9999;
        mouse.y = -9999;
      });

      // Touch support
      hero.addEventListener('touchmove', (e) => {
        if (e.touches.length) {
          const rect = canvas.getBoundingClientRect();
          mouse.x = e.touches[0].clientX - rect.left;
          mouse.y = e.touches[0].clientY - rect.top;
        }
      }, { passive: true });
    }

    let resizeTimer;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
        cancelAnimationFrame(animId);
        init();
      }, 200);
    }, { passive: true });

    // Pause when tab hidden (performance)
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        cancelAnimationFrame(animId);
      } else {
        loop();
      }
    });

    // Respect reduced motion preference
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      canvas.style.display = 'none';
      return;
    }

    init();
  })();
</script>
  <!-- ── OJO INICIO FOOTER ── -->
  <!-- ── FOOTER ── -->
  <footer class="site-footer" role="contentinfo">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <div class="footer-brand__logo">
            <div class="footer-brand__mark" aria-hidden="true">
              <img src="logo.webp" alt="Logo Enfermero.cl">
            </div>
            <div class="footer-brand__name">Enfermero<em>.cl</em></div>
          </div>
          <p class="footer-tagline">Plataforma de HealthTech e IA Clínica. Construida por enfermeros, para enfermeros, desde 2011.</p>
          <div class="footer-social">
            <a href="/sitemap.php" target="_blank" aria-label="Sitemap"><i class="fa fa-sitemap"></i></a>
            <a href="/rss.php" target="_blank" aria-label="RSS"><i class="fa-solid fa-rss"></i></a>
            <a href="https://t.me/enfermerocl" aria-label="Telegram"><i class="fa-brands fa-telegram"></i></a>
          </div>
        </div>
        <div class="footer-col">
          <h5>Links de Interés</h5>
          <nav class="footer-links-list">
            <a href="/blog.php">Blog</a>
            <a href="https://esi.enfermero.cl" target="_blank" rel="noopener">ESI AI Assistant</a>
            <a href="https://sentinel.enfermero.cl" target="_blank" rel="noopener">SENTINEL</a>
            <a href="https://copilot.enfermero.cl" target="_blank" rel="noopener">NurseCopilot</a>
            <a href="/about.php">Quiénes Somos</a>
          </nav>
        </div>
        <div class="footer-col">
          <h5>Síguenos en Facebook</h5>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fenfermero.cl&tabs&width=300&height=200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&colorscheme=dark" width="340" height="180" style="border:none;overflow:hidden" scrolling="no" frameborder="0"></iframe>
        </div>
        <div class="footer-col">
          <h5>Canal Oficial</h5>
          <div class="footer-telegram">
            <div class="footer-telegram__header">
              <div class="tg-icon" aria-hidden="true"><i class="fa-brands fa-telegram"></i></div>
              @Enfermero.cl
            </div>
            <p>Novedades en IA, Salud Digital y Enfermería.</p>
            <a href="https://t.me/enfermerocl" class="btn-telegram">Acceder al Canal Gratuito</a>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="footer-bottom__copy">&copy; 2026 Enfermero.cl. Todos los derechos reservados.</div>
        <div class="footer-bottom__links">
          <a href="#">Privacidad</a>
          <a href="about.php#contacto">Contacto</a>
        </div>
      </div>
    </div>
  </footer>

  <script>
  (function() {
    'use strict';

    // Header scroll
    const header = document.querySelector('.site-header');
    if (header) {
      window.addEventListener('scroll', () => {
        header.classList.toggle('scrolled', window.scrollY > 20);
      }, { passive: true });
    }

    // Mobile nav
    const hamburger = document.querySelector('.hamburger');
    const mobileNav = document.querySelector('.mobile-nav');
    if (hamburger && mobileNav) {
      hamburger.addEventListener('click', () => {
        const isOpen = hamburger.classList.toggle('open');
        mobileNav.classList.toggle('open', isOpen);
        document.body.style.overflow = isOpen ? 'hidden' : '';
        hamburger.setAttribute('aria-expanded', String(isOpen));
      });
      mobileNav.querySelectorAll('a').forEach(l => l.addEventListener('click', () => {
        hamburger.classList.remove('open');
        mobileNav.classList.remove('open');
        document.body.style.overflow = '';
      }));
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && mobileNav.classList.contains('open')) {
          hamburger.classList.remove('open');
          mobileNav.classList.remove('open');
          document.body.style.overflow = '';
        }
      });
    }

    // Scroll reveal
    const revealEls = document.querySelectorAll('.reveal');
    if ('IntersectionObserver' in window && revealEls.length) {
      const obs = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('visible');
            obs.unobserve(e.target);
          }
        });
      }, { threshold: 0.1, rootMargin: '0px 0px -30px 0px' });
      revealEls.forEach(el => obs.observe(el));
    } else {
      revealEls.forEach(el => el.classList.add('visible'));
    }

    // Skill bars animate when founder-card enters view
    const skillFills = document.querySelectorAll('.founder-skill__fill');
    if ('IntersectionObserver' in window && skillFills.length) {
      const skillObs = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('animated');
            skillObs.unobserve(e.target);
          }
        });
      }, { threshold: 0.5 });
      skillFills.forEach(el => skillObs.observe(el));
    } else {
      skillFills.forEach(el => el.classList.add('animated'));
    }
  })();
  </script>
</body>
</html>


