<%- include("../templates/cabecera", {tituloweb: 'Correo Institucional' }) -%>

 <!-- Modal inicial al abrir página NO BORRAR PARA CUALQUIER EMERGENCIA-->
<div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" >
  <div class="modal-dialog">
    <div class="modal-content img_fondo text_ibrand">
      <div class="modal-header text-center">
        <h3 class="modal-title text_ibrand w-100" id="modalLabel">
          <img src="../image/logos/izt_colores.png" style="max-width: 50%;">
            <p class="texto_noticia mt-3">
            📢📢¡AVISO <span class="texto_noticia2">IMPORTANTE</span><br>
            <span class="texto_noticia2">CORREO</span> INSTITUCIONAL!📢📢
            </p>
        </h3>
      </div>
      <div class="modal-body" style="text-align: justify; letter-spacing: 0.3px;">
        <h5>
          Si presentas problemas con la plataforma del correo institucional (aplicación móvil o página web), 
          te pedimos comunicarte a la extensión 8000 y 8001, correspondiente a la Jefatura de Unidad Departamental 
          de Operación y Producción, donde se brindará el apoyo técnico correspondiente.
        </h5>       
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn color_btn1 w-100" id="cerrarModal" data-bs-dismiss="modal">
          <i class="bi bi-x"></i> Cerrar
        </button>
      </div>
    </div>
  </div>
</div>



<div class=" img_fondo" >
  <!--logo iztalco directorio -->
   <div class="div-cesac text-white bg-img" style="margin-top: 7rem; padding-top: 3rem; height: 10rem;"  >
      <h2 class="text-center  text_ibrand ">Correo Institucional </h2>
      <div class="line4"></div>
      <h2 class="text-center text_ibrand">Alcaldía Iztacalco</h2>   
    </div>

    <style>
        body {
        background: linear-gradient(to bottom right, #f2f2f7, #dce7f7);
        font-family: 'Segoe UI', sans-serif;
        }

        .hero {
        padding: 20px 0;
        }

        .hero h1 {
        font-weight: 700;
        font-size: 3rem;
        }

        .hero p {
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 30px;
        }

        .btn-1 {
        background-color: #001d2f;
        color: #fff;
        border-radius: 8px;
        padding: 10px 20px;
        }

        .btn-2 {
        border: 2px solid #001d2f;
        color: #001d2f;
        border-radius: 8px;
        padding: 10px 20px;
        }

        .btn-1:hover {
        background-color: #003d60;
        color: #fff;
        }

        .btn-2:hover {
        background-color: #001d2f;
        color: #fff;
        }


        .hero img {
        width: 100%;
        max-width: 500px;
        height: auto;
        }

        @media (max-width: 768px) {
        .hero {
            text-align: center;
        }

        .hero h1 {
            font-size: 2.2rem;
        }

        .hero img {
            margin-top: 30px;
        }
        }
    </style>

    <section class="hero container">
        <div class="row align-items-center">
        <!-- Texto -->
        <div class="col-md-8">
            <h1>Descarga Outlook para iOS y Android</h1>
            <p>Simplifica tu jornada con el correo electrónico y el calendario integrados en una aplicación.</p>

            <!-- Botones -->
            <div class="d-flex flex-column flex-sm-row flex-wrap gap-2">
            <a href="https://login.microsoftonline.com/common/oauth2/v2.0/authorize?scope=service%3A%3Aaccount.microsoft.com%3A%3AMBI_SSL+openid+profile+offline_access&response_type=code&client_id=81feaced-5ddd-41e7-8bef-3e20a2689bb7&redirect_uri=https%3A%2F%2Faccount.microsoft.com%2Fauth%2Fcomplete-signin-oauth&client-request-id=6c694084-bc07-4941-a83e-3e3a615ec315&x-client-SKU=MSAL.Desktop&x-client-Ver=4.66.1.0&x-client-OS=Windows+Server+2019+Datacenter&prompt=login&client_info=1&state=H4sIAAAAAAAEAAXB28JCMAAA4Hfp1sX8DdOlVnOIKIncpTm2LXKKp_-_bxN1Kdk6Ypy_oVnv8LuhMEIhla5xHMgmyCOI20B9_5IGwpDd-FKYaCJngJv9E6p-Kju-fcIzGn6zMpwfyhDpEjJv0_ahtkfBToPqmq6FlrmTdWok1h9c9dAfD5rEPMtKLz9ZQ7xtrmneCvnD5cRGRfw87wxO75qXSQ9GlvCRAJzdBXzv33d7jhnh0Wpm-JK14pLVuLPueax5o3iBlAaJ10-4dav-VK3uszbLQsq2uBj80T-iPhe97dUTDErLNj4lveU3jYuXBMQ3cspvirxu65-addceOkqROtlDYSykXJ2uU6qc-NfqEgCJztXoOTvGE8CBTAb7oF51d6mfuWZUI_lGwBuZIvSJKApnRA17JZh0wBKnecFz7nwmV9Nsk8LNP65ti1SCAQAA&msaoauth2=true&instance_aware=true&lc=2058" class="btn btn btn-1">Inicia sesión en Outlook</a>
            <a href="https://play.google.com/store/apps/details?id=com.microsoft.office.outlook" class="btn btn-2">Descarga la aplicación para Android</a>
            <a href="https://apps.apple.com/mx/app/microsoft-outlook/id951937596" class="btn btn-2">Descargar la aplicación para iOS</a>          

            </div>


        </div>

        <!-- Imagen -->
        <div class="col-md-4 text-center">
            <img src="../image/logos/outlook2.jpg" alt="Outlook para móviles" class="img-fluid">
            
        </div>

        </div>
    </section>



</div>
<!-- Script para mostrar el modal de correo automáticamente -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var miModal = new bootstrap.Modal(document.getElementById('miModal'));
    miModal.show();

    // Permitir cerrar el modal con el botón personalizado
    document.getElementById('cerrarModal').addEventListener('click', function () {
      miModal.hide();
    });
  });
</script>


    








  


    
  









<%- include("../templates/footer") -%>