<?php
// ===========================================================================
// SysPower — landing V3.
// Texto tomado de la landing publicada y del catálogo de planes. Sin inventar.
// ===========================================================================
require_once __DIR__ . '/_planes.php';

$AHORRO  = a_ahorro_anual();
$URL_APP = a_url_panel();
$PROD    = 'syspower';
?>
<!doctype html>
<html lang="es" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>SysPower | Tu router se congela a las 2am. Lo reinicias en segundos</title>

<meta name="description" content="Controla físicamente la energía de tus equipos críticos desde cualquier navegador. Corte real por relé, cinco salidas, hardware incluido en la renta y sin anticipo.">
<meta name="author" content="SysPower, un producto de Alkes — software y soluciones TI">
<meta name="theme-color" content="#061c6b">
<meta name="format-detection" content="telephone=no">

<meta property="og:type" content="website">
<meta property="og:site_name" content="SysPower">
<meta property="og:title" content="SysPower | Reinicio físico remoto de equipos críticos">
<meta property="og:description" content="Apaga, enciende y reinicia routers, DVRs, switches y servidores desde el navegador. Sin visitas, sin VPN, sin esperas.">
<meta property="og:image" content="https://syspower.alkes.mx/assets/img/og-image.png">
<meta property="og:locale" content="es_MX">

<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700&family=Source+Sans+3:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="assets/css/alkes.css">

<script>
(function () {
    var r = document.documentElement;
    r.className = r.className.replace('no-js', 'js');
    try {
        var t = localStorage.getItem('tema');
        if (t === 'dark' || t === 'light') { r.setAttribute('data-theme', t); }
    } catch (e) {}
})();
</script>
</head>
<body>

<a class="skip-link" href="#main">Saltar al contenido</a>


<header class="nav" id="nav">
    <div class="container nav__in">
        <a class="nav__logo" href="#inicio">
            <img src="assets/img/logo-blanco.png" alt="" width="34" height="34">
            <span>SysPower</span>
        </a>
        <a class="nav__by" href="https://alkes.mx">por <strong>ALKES</strong></a>
        <nav class="nav__links" aria-label="Secciones">
            <a class="nav__link" href="#problema">Problema</a>
            <a class="nav__link" href="#solucion">Cómo funciona</a>
            <a class="nav__link" href="#casos">Casos</a>
            <a class="nav__link" href="#renta">Renta</a>
            <a class="nav__link" href="#confiabilidad">Confiabilidad</a>
            <a class="nav__link" href="#faq">Dudas</a>
        </nav>
        <div class="nav__actions">
            <?= a_tema() ?>
            <a class="btn btn--ghost btn--sm" href="<?= a_e($URL_APP) ?>">Iniciar sesión</a>
            <a class="btn btn--primary btn--sm" href="#renta">Ver renta</a>
        </div>
        <button class="nav__burger" type="button" id="navToggle" aria-expanded="false" aria-controls="navPanel" aria-label="Abrir menú">
            <?= a_icon('menu', 'i-menu') ?><?= a_icon('close', 'i-close') ?>
        </button>
    </div>
    <div class="nav__panel container" id="navPanel">
        <a class="nav__link" href="#problema">Problema</a>
        <a class="nav__link" href="#solucion">Cómo funciona</a>
        <a class="nav__link" href="#casos">Casos</a>
        <a class="nav__link" href="#renta">Renta</a>
        <a class="nav__link" href="#confiabilidad">Confiabilidad</a>
        <a class="nav__link" href="#faq">Dudas frecuentes</a>
        <a class="nav__link" href="#contacto">Contacto</a>
        <a class="nav__link" href="#ecosistema">Ecosistema Alkes</a>
        <div class="nav__panel-actions">
            <?= a_tema() ?>
            <a class="btn btn--outline" href="<?= a_e($URL_APP) ?>">Iniciar sesión</a>
            <a class="btn btn--primary" href="#renta">Ver renta y precios</a>
        </div>
    </div>
</header>

<main id="main">

<!-- 01 · Hero ------------------------------------------------------------- -->
<section class="hero" id="inicio">
    <div class="container">
        <div class="hero__grid">
            <div class="hero__body">
                <p class="eyebrow" data-reveal>Reinicio físico remoto para equipos críticos</p>
                <h1 data-reveal style="--reveal-delay:60ms">Tu router se congela a las 2am. Lo reinicias en <em>segundos</em>.</h1>
                <p class="lede" data-reveal style="--reveal-delay:120ms">
                    SysPower controla físicamente la energía de tus equipos críticos desde
                    cualquier navegador. Sin visitas. Sin VPN. Sin esperas.
                </p>
                <div class="btn-row" data-reveal style="--reveal-delay:180ms">
                    <a class="btn btn--primary btn--lg" href="#renta">Ver renta y precios<?= a_icon('arrow') ?></a>
                    <a class="btn btn--outline btn--lg" href="#solucion"><?= a_icon('eye') ?>Cómo funciona</a>
                </div>
                <ul class="hero__facts" data-reveal style="--reveal-delay:240ms">
                    <li><?= a_icon('check') ?>Hardware incluido en la renta</li>
                    <li><?= a_icon('check') ?>Sin anticipo</li>
                    <li><?= a_icon('check') ?>Sin VPN</li>
                </ul>
            </div>
            <div class="hero__aside" data-reveal style="--reveal-delay:300ms">
                <div class="ticks">
                    <div class="panel">
                        <div class="panel__bar">
                            <span class="panel__dots" aria-hidden="true"><i></i><i></i><i></i></span>
                            <span class="panel__url">app.syspower.alkes.mx</span>
                        </div>
                        <div class="panel__body">
                            <div class="panel__title">
                                <p class="panel__h">Salidas del controlador</p>
                                <span class="chip chip--accent"><?= a_icon('ethernet') ?>En línea</span>
                            </div>
                            <ul class="rows">
                                <li class="row"><span class="dot dot--on" aria-hidden="true"></span><span class="row__name">Router principal<small>Salida 1 · 120 V</small></span><span class="row__state row__state--on">Encendido</span></li>
                                <li class="row"><span class="dot dot--on" aria-hidden="true"></span><span class="row__name">DVR sucursal<small>Salida 2 · 120 V</small></span><span class="row__state row__state--on">Encendido</span></li>
                                <li class="row row--hi"><span class="dot dot--busy" aria-hidden="true"></span><span class="row__name">Switch piso 2<small>Salida 3 · ciclo de energía</small></span><span class="row__state">Reiniciando</span></li>
                                <li class="row"><span class="dot" aria-hidden="true"></span><span class="row__name">Servidor de respaldos<small>Salida 4 · 120 V</small></span><span class="row__state">Apagado</span></li>
                                <li class="row"><span class="dot dot--on" aria-hidden="true"></span><span class="row__name">Access point patio<small>Salida 5 · 120 V</small></span><span class="row__state row__state--on">Encendido</span></li>
                            </ul>
                            <div class="chips" style="margin-top:1rem">
                                <span class="chip"><?= a_icon('power') ?>Apagar</span>
                                <span class="chip"><?= a_icon('zap') ?>Encender</span>
                                <span class="chip chip--accent"><?= a_icon('restart') ?>Reiniciar</span>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="hero__note">
                    <?= a_icon('power') ?>
                    <span><strong>Corte físico de energía</strong>
                    <span>Funciona aunque el equipo esté completamente trabado y no responda a nada.</span></span>
                </p>
            </div>
        </div>
    </div>
</section>

<!-- 02 · Qué hace --------------------------------------------------------- -->
<section class="section section--tight" id="acciones">
    <div class="container">
        <div class="center" data-reveal style="margin-bottom:clamp(2rem, 1.4rem + 2.4vw, 3.5rem)">
            <p class="eyebrow">Lo que hace SysPower</p>
            <h2>Tres acciones. Un clic. Desde cualquier lugar.</h2>
        </div>
        <div class="pillars" data-reveal>
            <div class="pillar">
                <span class="pillar__k idx">01 · Apagar</span>
                <h3>Corta la energía al instante</h3>
                <p>Corta la energía del equipo seleccionado al instante.</p>
            </div>
            <div class="pillar">
                <span class="pillar__k idx">02 · Encender</span>
                <h3>Restaura cuando estés listo</h3>
                <p>Restaura la energía cuando estés listo para reiniciar.</p>
            </div>
            <div class="pillar">
                <span class="pillar__k idx">03 · Reiniciar</span>
                <h3>Ciclo completo con un clic</h3>
                <p>Apaga y enciende en secuencia automática con un solo clic.</p>
            </div>
        </div>
        <div class="trust trust--4 mt-block" data-reveal>
            <div class="trust__item"><?= a_icon('power') ?><h3>Corte físico de energía</h3><p>Funciona aunque el equipo esté completamente trabado y no responda a nada.</p></div>
            <div class="trust__item"><?= a_icon('globe') ?><h3>Sin VPN</h3><p>Acceso desde cualquier navegador y desde cualquier lugar, sin configuraciones complejas de red.</p></div>
            <div class="trust__item"><?= a_icon('rack') ?><h3>Salida por salida</h3><p>Solo se corta lo que tú indicas, sin afectar el resto del site.</p></div>
            <div class="trust__item"><?= a_icon('history') ?><h3>Historial y trazabilidad</h3><p>Registro de cada acción: quién, qué y cuándo.</p></div>
        </div>
    </div>
</section>

<!-- 03 · Problema --------------------------------------------------------- -->
<section class="section section--rule" id="problema">
    <div class="container">
        <?= a_head('01', '¿Te suena familiar?', 'Cada minuto que el equipo no responde, tu negocio está perdiendo dinero',
            'Un router trabado, un DVR congelado, un servidor sin respuesta. Mientras esperas a que alguien llegue a revisarlo y la solución sea desconectarlo y volverlo a conectar, mientras toda tu operación está detenida, tus clientes esperan y el costo sube. SysPower existe para que eso no vuelva a pasar.') ?>
        <div class="matrix matrix--2" data-reveal>
            <div class="matrix__item">
                <h3><?= a_icon('truck') ?>«Manda a alguien a reiniciarlo»</h3>
                <p>El clásico. El equipo falló y la solución es esperar a que un técnico llegue,
                   desconecte el cable y lo vuelva a enchufar. Cuesta caro y tarda horas.</p>
            </div>
            <div class="matrix__item">
                <h3><?= a_icon('alert') ?>«Pide a alguien que lo desconecte»</h3>
                <p>El empleado de turno desconecta el cable equivocado. Ahora hay dos problemas
                   en vez de uno, y nadie sabe bien qué apagó exactamente.</p>
            </div>
            <div class="matrix__item">
                <h3><?= a_icon('clock') ?>Tiempo muerto real</h3>
                <p>Mientras el equipo no vuelve, se caen ventas, cámaras, acceso a sistemas,
                   atención al cliente… todo lo que depende de esa conexión.</p>
            </div>
            <div class="matrix__item">
                <h3><?= a_icon('calendar') ?>Fuera de horario no hay solución</h3>
                <p>El equipo se congela un sábado a la medianoche. Sin control remoto, el problema
                   dura hasta que alguien pueda ir el lunes por la mañana.</p>
            </div>
        </div>
        <div class="matrix matrix--2 mt-block" data-reveal>
            <div class="matrix__item">
                <h3><?= a_icon('building') ?>Tu negocio gana</h3>
                <p><strong>Control real desde el primer día</strong></p>
                <ul class="compare__list">
                    <li><strong>Sin esperar a un técnico.</strong> Reinicias en segundos, a cualquier hora.</li>
                    <li>Cero traslados por reinicios de rutina.</li>
                    <li>Control preciso: solo el equipo que elegiste.</li>
                    <li><strong>Tu cliente no nota la caída.</strong> Recuperas servicio antes de que el impacto se sienta.</li>
                </ul>
            </div>
            <div class="matrix__item">
                <h3><?= a_icon('cpu') ?>Para integradores y sysadmins</h3>
                <p><strong>Lo instalas una vez. Queda listo para operar.</strong></p>
                <ul class="compare__list">
                    <li><strong>Instalación sencilla en el site.</strong> Conectas al rack, configuras las salidas y listo.</li>
                    <li>Usuarios autorizados reinician sin depender de terceros.</li>
                    <li><strong>Acceso multiusuario con roles.</strong> Cada persona usa su cuenta según permisos asignados.</li>
                    <li>Historial auditable por cuenta.</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- 04 · Cómo funciona ---------------------------------------------------- -->
<section class="section section--sunken section--rule" id="solucion">
    <div class="container">
        <?= a_head('02', 'Cómo funciona', 'Se instala una vez y queda listo para operar siempre',
            'SysPower se instala en tu site y queda listo para que cualquier usuario con acceso autorizado pueda reiniciar equipos en segundos desde el panel web, esté donde esté.') ?>
        <ol class="steps steps--5" data-reveal>
            <li class="step"><span class="step__n">01</span><h3>Se instala en tu site</h3><p>El dispositivo queda montado en el site y conectado a cada equipo crítico que quieras controlar.</p></li>
            <li class="step"><span class="step__n">02</span><h3>Asignas tus equipos</h3><p>Router, DVR, switch, servidor — cada uno queda nombrado y listo para reinicio remoto desde el panel.</p></li>
            <li class="step"><span class="step__n">03</span><h3>Accedes desde donde estés</h3><p>Abres el panel web en tu celular o computadora, sin VPN, desde cualquier lugar, sin apps especiales o adicionales.</p></li>
            <li class="step"><span class="step__n">04</span><h3>Reinicias con un clic</h3><p>SysPower corta físicamente la energía del equipo afectado y la restaura — solo ese, sin tocar los demás.</p></li>
            <li class="step"><span class="step__n">05</span><h3>Tu operación vuelve</h3><p>El equipo arranca, el servicio se recupera y el historial registra la acción automáticamente.</p></li>
        </ol>

        <div class="mt-block">
            <?= a_shot('assets/img/panel.png', 'Panel web de SysPower con las cinco salidas y sus estados', 1600, 900, 'Panel web: cinco salidas y su estado, con controles de apagar, encender y reiniciar', 'Fig. 01') ?>
        </div>
    </div>
</section>

<!-- 05 · Lo que cambia ---------------------------------------------------- -->
<section class="section band on-dark">
    <div class="container">
        <?= a_head('03', 'Por qué SysPower', 'Lo que cambia cuando lo usas') ?>
        <div class="compare" data-reveal>
            <div class="compare__col">
                <h3 class="compare__t compare__t--no"><?= a_icon('close') ?>Sin SysPower</h3>
                <ul class="compare__list">
                    <li>Esperas horas a que llegue un técnico</li>
                    <li>Pagas traslados por reinicios que toman segundos</li>
                    <li>Un empleado puede desconectar el equipo equivocado</li>
                    <li>Tu negocio se detiene hasta que alguien lo resuelva</li>
                    <li>Fuera de horario no hay solución</li>
                </ul>
            </div>
            <div class="compare__col compare__col--yes">
                <h3 class="compare__t compare__t--yes"><?= a_icon('check') ?>Con SysPower</h3>
                <ul class="compare__list">
                    <li>Reinicio remoto en segundos desde cualquier lugar</li>
                    <li>Cero traslados por ciclos de energía rutinarios</li>
                    <li>Controlas exactamente qué salida apagar o reiniciar</li>
                    <li>La operación vuelve en menos de un minuto</li>
                    <li>24/7, desde el celular, sin importar la hora</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- 06 · Casos ------------------------------------------------------------ -->
<section class="section" id="casos">
    <div class="container">
        <?= a_head('04', 'Casos de uso', 'Escenarios reales donde SysPower marca la diferencia',
            'Desde restaurantes hasta oficinas y cuartos de servidores: si tienes equipos críticos conectados, SysPower los mantiene bajo control.') ?>
        <div class="cases cases--3" data-reveal>
            <article class="case">
                <span class="idx">Restaurante con sucursales</span>
                <h3>DVR de seguridad congelado</h3>
                <p>El dueño lo reinicia desde el celular en segundos, sin mover a nadie.</p>
                <p class="case__out"><?= a_icon('check') ?>Sin traslado, sin tiempo ciego</p>
            </article>
            <article class="case">
                <span class="idx">Oficina corporativa</span>
                <h3>Router o switch congelado a las 8am</h3>
                <p>El sysadmin lo reinicia desde casa antes de salir. La oficina está lista cuando llega el equipo.</p>
                <p class="case__out"><?= a_icon('check') ?>El cliente ni lo nota</p>
            </article>
            <article class="case">
                <span class="idx">MikroTik o servidor pequeño</span>
                <h3>Equipo trabado sin respuesta a SSH</h3>
                <p>Ningún software llega a un equipo congelado. SysPower corta la energía físicamente y la restaura: reinicio garantizado.</p>
                <p class="case__out"><?= a_icon('check') ?>Funciona cuando todo lo demás falla</p>
            </article>
        </div>
    </div>
</section>

<!-- 07 · Renta ------------------------------------------------------------ -->
<section class="section section--sunken section--rule" id="renta">
    <div class="container">
        <?= a_head('05', 'Renta', 'Planes mensuales y anuales, sin cobro inicial por el equipo',
            'Un solo equipo SysPower, todo incluido: conexión por cable o WiFi y hardware sin anticipo. El plan anual equivale a 10 meses pagados y 12 operando.') ?>
        <div class="center" data-reveal>
            <div class="period" role="tablist" aria-label="Periodo de facturación">
                <button type="button" role="tab" id="tab-mensual" aria-selected="true" aria-controls="panel-mensual">Mensual</button>
                <button type="button" role="tab" id="tab-anual" aria-selected="false" tabindex="-1" aria-controls="panel-anual">Anual<?php if ($AHORRO): ?><span class="save">−<?= (int) $AHORRO ?> %</span><?php endif; ?></button>
            </div>
        </div>
        <div id="panel-mensual" role="tabpanel" aria-labelledby="tab-mensual" data-reveal><?= a_grid_planes('mensual') ?></div>
        <div id="panel-anual" role="tabpanel" aria-labelledby="tab-anual" hidden><?= a_grid_planes('anual') ?></div>

        <p class="center muted" data-reveal><?= a_icon('shield') ?> El plan incluye hardware, panel web, historial, soporte y actualizaciones. Sin anticipo ni compra inicial del equipo.</p>

        <div class="mt-block">
            <?= a_head('06', 'Qué incluye', 'Qué incluye el servicio', '', 'head--sub') ?>
            <div class="matrix matrix--3" data-reveal>
                <div class="matrix__item"><h3><?= a_icon('cpu') ?>Controlador con relés industriales</h3></div>
                <div class="matrix__item"><h3><?= a_icon('display') ?>Panel web en la nube</h3></div>
                <div class="matrix__item"><h3><?= a_icon('ethernet') ?>5 salidas 120V 10A</h3></div>
                <div class="matrix__item"><h3><?= a_icon('users') ?>Multiusuario con roles</h3></div>
                <div class="matrix__item"><h3><?= a_icon('history') ?>Historial y trazabilidad</h3></div>
                <div class="matrix__item"><h3><?= a_icon('shield') ?>Soporte y garantía incluidos</h3></div>
            </div>
            <p class="center muted mt-block"><?= a_icon('check') ?> Hardware incluido en la renta. Sin anticipo ni compra inicial.</p>
        </div>
    </div>
</section>

<!-- 08 · Confiabilidad ---------------------------------------------------- -->
<section class="section band on-dark" id="confiabilidad">
    <div class="container">
        <?= a_head('07', 'Confiabilidad', 'Diseñado para operar en sitios reales, no en laboratorio',
            'SysPower fue pensado para entornos donde los equipos fallan de verdad: oficinas, sucursales, cuartos de servidores pequeños, instalaciones con racks. Hardware industrial, sin drivers, sin configuraciones fragiles.') ?>
        <div class="trust trust--3" data-reveal>
            <div class="trust__item"><?= a_icon('power') ?><h3>Corte físico, no lógico</h3><p>El relé interrumpe la energía directamente. No depende del sistema operativo ni de la red del dispositivo.</p></div>
            <div class="trust__item"><?= a_icon('rack') ?><h3>Salida por salida</h3><p>Reinicias solo el equipo afectado, sin cortar nada más del site.</p></div>
            <div class="trust__item"><?= a_icon('wifi') ?><h3>Conexión por cable con respaldo WiFi</h3><p>Opera por Ethernet y, si no hay cable, cae a WiFi automáticamente.</p></div>
            <div class="trust__item"><?= a_icon('zap') ?><h3>10A por salida, 120V AC</h3><p>Apto para routers, DVRs, switches y servidores pequeños.</p></div>
            <div class="trust__item"><?= a_icon('shield') ?><h3>Producto terminado, no DIY</h3><p>Con garantía, actualizaciones y soporte incluidos en la renta.</p></div>
            <div class="trust__item"><?= a_icon('lock') ?><h3>Infraestructura segura</h3><p>Servidor web con protección anti DDoS, certificado SSL y actualizaciones automáticas incluidas en la renta.</p></div>
        </div>
        <div class="mt-block">
            <?= a_shot('assets/img/controlador.jpg', 'Controlador SysPower instalado en un rack junto a los equipos de red', 1600, 1067, 'El controlador instalado en el site, junto a los equipos que gobierna', 'Fig. 02') ?>
        </div>
    </div>
</section>

<!-- 09 · Preguntas frecuentes --------------------------------------------- -->
<section class="section" id="faq">
    <div class="container container--narrow">
        <?= a_head('08', 'Preguntas frecuentes', 'Dudas comunes, respuestas directas',
            'Para dueños, gerentes, sysadmins e integradores que quieren entender exactamente qué obtienen.') ?>
        <div data-reveal>
            <details class="disc" open>
                <summary class="disc__sum"><span class="disc__t">¿Qué pasa si un equipo está completamente trabado y no responde?</span><?= a_icon('chevron', 'disc__chev') ?></summary>
                <div class="disc__body"><p class="faq-a">Es el escenario donde SysPower más ayuda. Cuando el equipo no responde a nada por red, SysPower igual funciona porque el corte es físico: interrumpe la corriente del relé directamente, sin pasar por el sistema del equipo. No importa si está congelado, colgado o en kernel panic.</p></div>
            </details>
            <details class="disc">
                <summary class="disc__sum"><span class="disc__t">¿Qué pasa si se va la luz o el internet en el site?</span><?= a_icon('chevron', 'disc__chev') ?></summary>
                <div class="disc__body"><p class="faq-a">Si se va la luz, el sistema se reinicia solo cuando vuelve la energía. Si se cae el internet del site, el controlador mantiene la última configuración descargada desde la nube y sigue operando localmente con la lógica configurada. Recuperas el control remoto desde el panel en cuanto el enlace a internet se restaure.</p></div>
            </details>
            <details class="disc">
                <summary class="disc__sum"><span class="disc__t">¿Se puede operar el panel sin saber nada técnico?</span><?= a_icon('chevron', 'disc__chev') ?></summary>
                <div class="disc__body"><p class="faq-a">Sí. El panel está pensado para uso cotidiano sin conocimiento técnico: ves tus equipos nombrados, eliges cuál reiniciar y listo. Cualquier usuario con permisos puede operar y administrar el controlador según su rol.</p></div>
            </details>
            <details class="disc">
                <summary class="disc__sum"><span class="disc__t">¿Qué necesita el site para la instalación?</span><?= a_icon('chevron', 'disc__chev') ?></summary>
                <div class="disc__body"><p class="faq-a">Una toma eléctrica estándar a 120V, conexión a internet por cable (Ethernet) o WiFi y espacio físico para el controlador cerca de los equipos. No requiere configuración compleja de firewall ni abrir puertos al exterior.</p></div>
            </details>
            <details class="disc">
                <summary class="disc__sum"><span class="disc__t">¿Qué pasa si el hardware se daña?</span><?= a_icon('chevron', 'disc__chev') ?></summary>
                <div class="disc__body"><p class="faq-a">El servicio incluye garantía de hardware. Si el controlador falla, lo atendemos para restablecer la operación.</p></div>
            </details>
            <details class="disc">
                <summary class="disc__sum"><span class="disc__t">Soy integrador o sysadmin. ¿Cómo encaja SysPower en mis instalaciones?</span><?= a_icon('chevron', 'disc__chev') ?></summary>
                <div class="disc__body"><p class="faq-a">SysPower está pensado para que lo instales en el site del cliente y quede disponible para su operación diaria con acceso multiusuario y roles. El resultado: menos visitas de emergencia por tu parte, mejor experiencia para tu cliente y más valor en tu servicio de soporte. Contáctanos para conocer el modelo de distribución.</p></div>
            </details>
        </div>
    </div>
</section>

<!-- 10 · Cierre ----------------------------------------------------------- -->
<section class="section section--tight section--rule">
    <div class="container">
        <div class="cta" data-reveal>
            <div>
                <p class="eyebrow">Empieza hoy</p>
                <h2>¿Listo para tomar el control de tus equipos críticos?</h2>
                <p class="lede">Únete a las empresas que ya reinician sus equipos remotamente con SysPower. Sin visitas de emergencia, sin esperar a nadie en sitio.</p>
            </div>
            <div class="btn-row">
                <a class="btn btn--primary btn--lg" href="#renta">Ver renta y precios<?= a_icon('arrow') ?></a>
                <a class="btn btn--outline btn--lg" href="<?= a_e($URL_APP) ?>" data-open-demo><?= a_icon('play') ?>Probar el demo</a>
            </div>
        </div>
    </div>
</section>

<!-- 11 · Contacto --------------------------------------------------------- -->
<section class="section section--sunken section--rule" id="contacto">
    <div class="container">
        <?= a_head('09', 'Contacto', 'Contacto y Soporte') ?>
        <div class="contact contact--3" data-reveal>
            <a class="contact__item" href="mailto:<?= ALKES_MAIL ?>">
                <?= a_icon('mail') ?><span class="contact__k">Correo</span>
                <span class="contact__v"><?= ALKES_MAIL ?></span>
                <span class="contact__d">Respuesta en horario hábil.</span>
            </a>
            <a class="contact__item" href="tel:<?= ALKES_TEL ?>">
                <?= a_icon('phone') ?><span class="contact__k">Teléfono</span>
                <span class="contact__v"><?= ALKES_TEL_TXT ?></span>
                <span class="contact__d">Para demostraciones guiadas.</span>
            </a>
            <a class="contact__item" href="<?= a_e($URL_APP) ?>">
                <?= a_icon('login') ?><span class="contact__k">Acceso</span>
                <span class="contact__v">app.syspower.alkes.mx</span>
                <span class="contact__d">Entra a tu panel de SysPower.</span>
            </a>
        </div>
        <div class="mt-block">
            <?= a_autor('Como desarrollador de software y administrador de sistemas, me comprometo a ofrecerte una solución confiable, flexible y centrada en la experiencia del usuario. Para soporte técnico, consultas o la integración de módulos adicionales, no dudes en contactarme.') ?>
        </div>
    </div>
</section>

<!-- 12 · Ecosistema ------------------------------------------------------- -->
<section class="section section--tight" id="ecosistema">
    <div class="container">
        <?= a_head('10', 'Ecosistema Alkes', 'SysPower no está solo',
            'Cinco productos desarrollados, alojados y operados por Alkes. Mismo soporte, misma casa.') ?>
        <?= a_ecosistema_grid($PROD) ?>
    </div>
</section>

</main>

<footer class="footer">
    <div class="container footer__top">
        <div class="footer__brand">
            <span class="nav__logo"><img src="assets/img/logo-blanco.png" alt="" width="34" height="34"><span>SysPower</span></span>
            <p>Dispositivo instalado en tu site con control remoto por panel web. Reinicia
               físicamente routers, DVRs, switches y servidores en segundos, desde cualquier
               lugar, sin necesitar a nadie en sitio.</p>
        </div>
        <div class="footer__cols">
            <div class="footer__col">
                <h2 class="footer__h">Producto</h2>
                <ul>
                    <li><a href="#problema">El problema</a></li>
                    <li><a href="#solucion">Cómo funciona</a></li>
                    <li><a href="#renta">Renta y precios</a></li>
                    <li><a href="#faq">Preguntas frecuentes</a></li>
                </ul>
            </div>
            <div class="footer__col">
                <h2 class="footer__h">Accesos</h2>
                <ul>
                    <li><a href="<?= a_e($URL_APP) ?>">Iniciar sesión</a></li>
                    <li><a href="<?= a_e($URL_APP) ?>" data-open-demo>Probar el demo</a></li>
                    <li><a href="<?= ALKES_CENTRAL ?>">Contratar</a></li>
                    <li><a href="<?= ALKES_SITIO ?>">Alkes</a></li>
                </ul>
            </div>
            <div class="footer__col">
                <h2 class="footer__h">Contacto</h2>
                <ul>
                    <li><a href="#confiabilidad">Por qué es confiable</a></li>
                    <li><a href="#casos">Casos de uso</a></li>
                    <li><a href="mailto:<?= ALKES_MAIL ?>"><?= ALKES_MAIL ?></a></li>
                    <li><a href="tel:<?= ALKES_TEL ?>"><?= ALKES_TEL_TXT ?></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="footer__bot">
            <p>© <?= date('Y') ?> SysPower. Todos los derechos reservados.</p>
            <a class="footer__sig" href="<?= ALKES_SITIO ?>">Un producto de <strong>ALKES</strong></a>
        </div>
    </div>
</footer>

<?= a_dialogo_demo($URL_APP) ?>

<script src="assets/js/alkes.js" defer></script>
</body>
</html>
