<?php
$page_title = '8 Tips de Ahorro de Energía';
$meta_desc = 'Recomendaciones para ahorrar energía en el entorno laboral, contribuyendo al cuidado del medio ambiente y la eficiencia energética.';
$current_page = 'politicas';
$base = '';

$gallery_images = [
    ['src' => 'img/capacitacion/energia/ahorro_energia_1.jfif', 'alt' => 'Consejo de ahorro de energia 1'],
    ['src' => 'img/capacitacion/energia/ahorro_energia_2.jfif', 'alt' => 'Consejo de ahorro de energia 2'],
    ['src' => 'img/capacitacion/energia/ahorro_energia_3.jfif', 'alt' => 'Consejo de ahorro de energia 3'],
    ['src' => 'img/capacitacion/energia/ahorro_energia_4.jfif', 'alt' => 'Consejo de ahorro de energia 4'],
    ['src' => 'img/capacitacion/energia/ahorro_energia_5.jfif', 'alt' => 'Consejo de ahorro de energia 5']
];

require_once '../../includes/banner.php';
require_once '../../includes/navbar.php';
?>

<main class="doc-shell">
    <div class="doc-container">
        <article class="doc-paper">
            <header class="doc-header">
                <div class="doc-kicker">Cuidado del medio ambiente</div>
                <h1 class="doc-title">8 Tips de Ahorro de Energía</h1>
                <p class="doc-lead">
                    Pequeñas acciones que generan un gran impacto en el consumo de energía eléctrica y en la
                    conservación del entorno.
                </p>
            </header>

            <div class="doc-body">
                <section class="doc-section">
                    <div class="doc-visual-band">
                        <div class="doc-visual-copy">
                            <p class="doc-kicker">Consumo eficiente</p>
                            <h2>Apagar, desconectar y optimizar</h2>
                            <p>Las imágenes refuerzan las prácticas de ahorro que más impacto generan en oficina:
                                reducir consumos pasivos, aprovechar la luz natural y cuidar los equipos durante la
                                jornada.</p>
                        </div>
                        <figure class="doc-visual-frame">
                            <img class="doc-visual-image" src="<?= $base . $gallery_images[0]['src'] ?>"
                                alt="<?= htmlspecialchars($gallery_images[0]['alt']) ?>">
                        </figure>
                    </div>
                </section>

                <section class="doc-section">
                    <div class="doc-block">
                        <div class="doc-block-title">Recomendaciones diarias</div>
                        <ol class="doc-ordered">
                            <li><strong>Desconecta tu equipo</strong> cuando no lo utilices.</li>
                            <li><strong>Aprovecha la luz natural</strong>: si hay luz de día, apaga la luz de tu
                                oficina.</li>
                            <li>Cuando tu carga de tu <strong>laptop esté al máximo</strong>, desconecta el cargador
                                para ahorrar energía y evitar que la batería se dañe.</li>
                            <li><strong>Apaga tu monitor</strong> de computadora si no lo estás utilizando.</li>
                            <li><strong>Apaga la luz de tu oficina</strong> antes de salir.</li>
                            <li>Utiliza equipos de <strong>alta eficiencia energética</strong> siempre que sea posible.
                            </li>
                            <li>Configura tus equipos en <strong>modo suspensión o ahorro de energía</strong> durante
                                pausas prolongadas.</li>
                            <li>Participa en las campañas internas de <strong>concientización sobre consumo
                                    responsable</strong>.</li>
                        </ol>
                    </div>
                </section>

                <section class="doc-section">
                    <div class="doc-visual-cluster">
                        <figure class="doc-visual-frame doc-visual-frame--tall">
                            <img class="doc-visual-image" src="<?= $base . $gallery_images[1]['src'] ?>"
                                alt="<?= htmlspecialchars($gallery_images[1]['alt']) ?>">
                        </figure>
                        <div class="doc-visual-stack doc-visual-stack--grid">
                            <?php for ($index = 2; $index < count($gallery_images); $index++): ?>
                            <figure class="doc-visual-card">
                                <img class="doc-visual-image" src="<?= $base . $gallery_images[$index]['src'] ?>"
                                    alt="<?= htmlspecialchars($gallery_images[$index]['alt']) ?>">
                            </figure>
                            <?php endfor; ?>
                        </div>
                    </div>
                </section>
            </div>
        </article>
    </div>
</main>

<?php require_once '../../includes/footer.php'; ?>