<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="QUIENES SOMOS, NOSOTROS">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Telmovil | Recargas</title>
    <!--CARGA DE CSS-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="css/conekta-styles.css" media="all" rel="stylesheet" type="text/css">
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"
            integrity="sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA="
            crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
</head>
<body>
    <!--PRIMERA SECCION | AQUI SE ENCUENTRA EL MENU DEL SITIO-->
    <section class="seccion1" id="cabecera">
        <!-- Top Bar -->
        <div class="bg-light text-dark py-2 sticky-top">
            <div class="container d-flex justify-content-between">
                <div>
                    <a href="https://api.whatsapp.com/send/?phone=525639436537&text&app_absent=0" class="topbar-logos mr-2" target="_blank" ><i class="bi bi-whatsapp"></i></a>
                    <a href="https://www.facebook.com/telmovilmx" class="topbar-logos mr-2" target="_blank"><i class="bi bi-facebook"></i></a>
                    <a href="https://www.youtube.com/channel/UCNYbMkl_r67NXdXt5x5ur6A" class="topbar-logos mr-2" target="_blank"><i class="bi bi-youtube"></i></a>
                    <a href="https://www.tiktok.com/@telmovil.mx" class="topbar-logos mr-2" target="_blank"><i class="bi bi-tiktok"></i></a>
                </div>
                <div class="">
                    <a href="mailto:atencion.clientes@telmovil.mx" class="text-dark mx-2" target="_blank">atencion.clientes@telmovil.mx</a>
                    <a href="https://api.whatsapp.com/send/?phone=525639436537&text&app_absent=0" class="text-dark mr-4" target="_blank">Contacto</a>
                </div>
            </div>
        </div>
        <header class="fixed-top shadow-sm" role="banner">
            <!--LOGO-->
            <div class="encabezado">
                <a href="index.html">
                    <img src="images/logo.svg" alt="Logotipo" id="logo-normal">
                    <img src="images/Logob.svg" alt="Logotipo" id="logo-blanco">
                </a>
                <!--MENU PRINCIPAL-->
                <div class="menu-principal">
                    <nav class="d-none d-lg-block sub">
                        <ul>
                            <li id="recargas-mp"><button class="btn btn-recargas" data-toggle="modal" data-target="#recargas-btns">Recarga </button></li>
                            <li class="active"><a href="index.html">Inicio</a></li>
                            <li><a href="cambioDN.php">Asigna tu número</a></li>
                            <li class="sub-menu dropdown">
                                <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Consulta
                                </a>
                                <div class="dropdown-menu fade-up" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="puntos-recarga.html">Puntos de recarga</a>
                                    <a class="dropdown-item" href="cobertura.html">Cobertura</a>
                                </div>
                            </li>
                            <li><a href="portabilidad.html">Cámbiate a Telmovil</a></li>
                            <li class="nav-item">
                                <a class="nav-link text-purple btn-mi-telmovil" href="https://micuenta.telmovil.mx/auth/signin"><i class="bi bi-person-fill mx-2"></i> Mi Telmovil</a>
                            </li>
                            <li class="nav-item mx-2">
                                <a class="btn btn-telmov" href="https://www.telmov.mx/">Telmov</a>
                            </li>
                            
                            <!-- <li><a href="portabilidad.html">Cámbiate a Telmovil</a></li> -->
                            
                            <!-- <li class="btn-app">
                                <a href="https://micuenta.telmovil.mx/auth/signin">
                                    <img class="img-app" src="icons/app.png" alt="">
                                </a>
                            </li> -->
                        </ul>
                    </nav>
                </div>
                <!--BOTON BUSCAR-->
                <button type="button" class="boton-buscar" style="display: none;" data-toggle="collapse" data-target="#campo-buscar" aria-expanded="false">
                    <img src="images/lupa.svg" alt="Buscar">
                </button>
                <!--BOTON MOVIL-->
                <button type="button" class="boton-menu d-lg-none" data-toggle="collapse" data-target="#menu-movil" aria-expanded="false">
                    <img src="images/hamburger.svg" alt="Menu">
                </button>
                <!--MENU MOVIL-->
                <nav class="collapse d-lg-none" id="menu-movil">
                    <ul>
                        <li id="recargas"><button class="btn" data-toggle="modal" data-target="#recargas-btns" style="margin-left: 0; padding-left: 0;">Recarga</button></li>
                        <li class=""><a href="index.html">Inicio</a></li>
                        <li><a href="cambioDN.php">Asigna tu número</a></li>
                        <li><a href="puntos-recarga.html">Puntos de recarga</a></li>
                        <li><a href="cobertura.html">Cobertura</a></li>
                        <li class="nav-item">
                            <a class="nav-link text-purple btn-mi-telmovil" href="https://micuenta.telmovil.mx/auth/signin"><i class="bi bi-person-fill mx-2"></i> Mi Telmovil</a>
                        </li>
                        <li class="nav-item mx-2">
                            <a class="btn btn-telmov-movil" href="https://www.telmov.mx/">Telmov</a>
                        </li>
                        
                        
                        <!-- <li class="btn-app">
                            <a href="https://micuenta.telmovil.mx/auth/signin">
                                <img class="img-app" src="icons/app.png" alt="">
                            </a>
                        </li> -->
                    </ul>
                </nav>
                <!--CAMPO DE BUSQUEDA-->
                <form action="#" class="collapse campo-escritorio" id="campo-buscar">
                    <div class="busqueda">
                        <input type="text" placeholder="Buscar...">
                        <input type="submit" value="Buscar">
                    </div>
                </form>
            </div>
        </header>
    </section>
    <!--LOADING-->
    <div id="loadingscreen" style="display: none;">
        <img src="images/oval.svg">
    </div>
    <!--RECARGA MOVIL-->
    <div id="recargaMovil">
        <section class="recargas">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 text-center recarga-img">
                        <h2><img src="images/recarga.svg" alt="Recarga">&nbsp;Recarga en línea tu Telmovil</h2>
                    </div>
                    <form id="formValidPhone">
                    <div class="col-lg-3 col-md-4 col-11 recarga-box sombra-recarga-box animated fadeIn" id="validacion">
                        <!-- <form id="formValidPhone"> -->
                            <div class="row align-self-center">
                                <div class="col-6"><img class="numero-img" src="images/cel.svg" alt="Legales"></div>
                                <div class="col-4 img-correo-recarga"><img class="correo-img" src="images/correo-recarga.svg" alt="Legales"></div>
                            </div>
                            <h3 class="titulo-docs">1. Ingresa tus datos</h3>
                            <div class="form-row">
                                <div class="form-group col-md-12" id="grupo__celular">
                                    <label for="celular">Número Telmovil*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="tel" class="form-control campo-tel" name="celular" id="celular"
                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                            placeholder="Escribe tu número Telmovil"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El número debe ser de 10 dígitos y solo números.</p>
                                </div>
                                <div class="form-group col-md-12" id="grupo__correoValidacion">
                                    <label for="correoValidacion">Correo electrónico*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="email" class="form-control campo-correo" name="correoValidacion" id="correoValidacion" placeholder="Escribe tu correo">
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El formato del correo no es válido.</p>
                                </div>
                            </div>
                            <button class="btn-recarga" type="submit">Continuar</button>
                        <!-- </form> -->
                    </div>
                    <!-- aca va metodo de pago y botones -->
                    <div class="col-lg-3 col-md-4 col-11 recarga-box animated fadeIn" id="paquetes">
                        <img class="costo-img" src="images/costo.svg" alt="Legales">
                        <h3 class="titulo-docs">2. Selecciona la cantidad</h3>
                        <div id="offers"></div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-11 recarga-box animated fadeIn" id="metodoPago" style="pointer-events: none; opacity: 0.7;">
                        <img class="pago-img" src="images/pago.svg" alt="Legales">
                        <h3 class="titulo-docs">3. Selecciona el método de pago</h3>
                        <div class="form-check mt-3">
                            <input class="radio-box-input-paso3" type="radio" name="tipoPago" id="radio1" value="card" onclick="setMethodPay('card')">
                            <label class="radio-box-label-paso3" for="radio1">
                                <span class="radio-box-span-paso3">
                                    Tarjeta de crédito o débito
                                </span>
                            </label>
                        </div>
                        <!-- <div class="form-check mt-3">
                            <input class="radio-box-input-paso3" type="radio" name="tipoPago" id="radio2" value="oxxo" onclick="setMethodPay('oxxo')">
                            <label class="radio-box-label-paso3" for="radio2">
                                <span class="radio-box-span-paso3">
                                Pago en efectivo
                                </span>
                            </label>
                        </div> -->
                        <button class="btn-recarga" type="submit">Continuar</button>
                    </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
    <!--FORMULARIOS PAGO-->
    <div id="formsPay">
        <section class="formulario-kuesky sec-form">
            <div class="container">
                <div class="row justify-content-center animated fadeIn" id="card">
                    <div class="col-md-1 col-3">
                        <img class="img-tarjetak" src="images/pago.svg" alt="Tarjeta de credito o debito">
                    </div>
                    <div class="col-md-10 col-9">
                        <h2 class="titulo-fkuesky">Tarjeta de crédito o débito</h2>
                    </div>
                    <div class="col-md-11 col-11 f-kuesky caja-form">
                        <form id="formCard">
                            <div class="form-row">
                                <div class="form-group col-md-4" id="grupo__tarjeta">
                                    <label for="tarjeta">Número de tarjeta*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="tarjeta" id="tarjeta"
                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                            placeholder="Escribe tu número de tarjeta"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El número debe ser de 15 a 16 dígitos y solo números.</p>
                                </div>
                                <div class="form-group col-md-4" id="grupo__fecha">
                                    <label for="fecha">Fecha de expiración*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="fecha" id="fecha"
                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                            placeholder="MM/YY"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">La fecha debe ser de 4 dígitos y solo números, en formato mes/año.</p>
                                </div>
                                <div class="form-group col-md-4" id="grupo__cvc">
                                    <label for="cvc">CVC*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="password" class="form-control campo-fkuesky" name="cvc" id="cvc"
                                            maxlength="4"
                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                            placeholder="CVC"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El CVC debe ser de 3 a 4 dígitos y solo números.</p>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-4" id="grupo__nombre">
                                    <label for="nombre">Nombre*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="nombre" id="nombre"
                                            onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32)"
                                            placeholder="Escribe tu nombre"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El nombre debe ser de 1 a 30 dígitos y sólo puede contener letras.</p>
                                </div>
                                <div class="form-group col-md-4" id="grupo__apellido">
                                    <label for="apellido">Apellido paterno*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="apellido" id="apellido"
                                            onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32)"
                                            placeholder="Escribe tu apellido paterno"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El apellido debe ser de 1 a 30 dígitos y sólo puede contener letras.</p>
                                </div>
                                <div class="form-group col-md-4" id="grupo__correo">
                                    <label for="correo">Correo electrónico*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="email" class="form-control campo-fkuesky" name="correo" id="correo" placeholder="Escribe tu correo">
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El formato del correo no es válido.</p>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-8" id="grupo__calle">
                                    <label for="calleNumero">Calle*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="calle" id="calle"
                                            onkeypress="return ((event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32 || event.charCode == 35)"
                                            placeholder="Escribe tu calle"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">Calle debe ser de 1 a 30 dígitos y sólo puede contener letras y números.</p>
                                </div>
                                <div class="form-group col-md-4" id="grupo__numeroExt">
                                    <label for="numeroExt">Número exterior*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="numeroExt" id="numeroExt"
                                            onkeypress="return ((event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32 || event.charCode == 35)"
                                            placeholder="Escribe tu número exterior"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">Número exterior debe ser de 1 a 6 dígitos y sólo puede contener letras y números.</p>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-4" id="grupo__cp">
                                    <label for="cp">Código postal*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="cp" id="cp"
                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                            placeholder="Escribe tu código postal"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El código postal debe ser de 5 dígitos y solo números.</p>
                                </div>
                                <div class="form-group col-md-4" id="grupo__municipio">
                                    <label for="municipio">Municipio*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="municipio" id="municipio"
                                            onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32)"
                                            placeholder="Escribe tu código postal para buscar el municipio"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El municipio debe ser de 1 a 30 dígitos y sólo puede contener letras.</p>
                                </div>
                                <div class="form-group col-md-4" id="grupo__estado">
                                    <label for="estado">Estado*</label>
                                    <div class="formulario-grupo-input">
                                        <input type="text" class="form-control campo-fkuesky" name="estado" id="estado"
                                            onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || event.charCode == 32)"
                                            placeholder="Escribe tu código postal para buscar el estado"
                                        >
                                        <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                    </div>
                                    <p class="form-input-error">El estado debe ser de 1 a 30 dígitos y sólo puede contener letras.</p>
                                </div>
                            </div>
                            <div class="text-center mt-2" id="amountCard"></div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!--PAGO EXITOSO Y ERROR-->
    <div id="pagoExitoError">
        <section class="pago-exitoso">
            <div class="container-fluid">
                <div class="row justify-content-around">
                    <div class="col-md-5 col-12">
                        <h2>
                            <div id="messageExitoError"></div>
                        </h2>
                        <button class="btn-recarga" type="button" onclick="location.reload()">Nueva recarga</button>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!--PAGO CONEKTA-->
    <div id="conektaPay">
    <section class="pago-oxxo">
      <div class="container-fluid">
          <div class="row justify-content-around">
              <div class="col-lg-4 col-md-8 col-sm-10 col-12">
                <form name="domPdf" id="domPdf" action="dompdf.php" method="post">
                  <div class="opps">
                    <div style="margin:0px auto;max-width:600px;">
                        <div align="center" role="presentation" style="width:100%;"> 
                            <div class="content">
                                <div style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation"
                                         style="width:100%;">
                                        <div class="content">
                                            <div class="opps-column-per-100">
                                                <div class="opps-column-per-50">
                                                    <div role="presentation" style="vertical-align:top;" width="100%">
                                                        <div align="center" class="section">
                                                            <div role="presentation" class="section-image">
                                                                <div style="width:51px;">
                                                                    <img height="auto" class="image-logo"
                                                                         src="https://assets.conekta.com/templates/cash-in/shapes/shape-a.png"
                                                                         width="51"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                
                                                <div class="opps-column-per-50">
                                                    <div role="presentation" style="vertical-align:top;" width="100%">
                                                        <div align="right" class="section">
                                                            <div role="presentation" class="section-image">
                                                                <div style="width:90px;">
                                                                    <img height="auto" class="image-logo"
                                                                         src="https://assets.conekta.com/templates/cash-in/shapes/shape-b.png"
                                                                         width="90"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation" style="width:100%;">
                                        <div class="content">
                                            <div class="opps-column-per-100">
                                                <div role="presentation" width="100%">
                                                    <div style="vertical-align:top;padding:0;">
                                                        <div role="presentation" width="100%">
                                                            <div align="left"
                                                                 style="font-size:0px;padding:10px 25px;padding-top:0;word-break:break-word;">
                                                                <div role="presentation" class="section-image">
                                                                    <div style="width:122px;"><img height="20"
                                                                                                   src="images/conekta.svg"
                                                                                                   style="border:0;display:block;outline:none;text-decoration:none;height:20;width:100%;font-size:13px;"
                                                                                                   width="122">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation" style="width:100%;">
                                        <div class="content">
                                            <div class=" opps-column-per-100">
                                                <div role="presentation" width="100%">
                                                    <div style="vertical-align:top;padding:0;">
                                                        <div role="presentation" width="100%">
                                                            <div align="left"
                                                                 style="font-size:0px;padding:20px 0 10px;word-break:break-word;">
                                                                <div style="font-family:Inter, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
                                                                    <p class="title" align="center"
                                                                       style="font-size: 16px; line-height: 20px; color: #585987; font-weight: 500">
                                                                        ¡Tu referencia para pagar Efectivo con Conekta está lista!</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation" style="width:100%;">
                                        <div class="content">
                                            <div class="opps-column-px-300"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                                <div role="presentation" style="vertical-align:top;" width="100%">
                                                    <div align="center"
                                                         style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                        <div role="presentation" class="section-image">
                                                            <div style="width:229px;"><img
                                                                                        id="barcodeConekta"
                                                                                        height="85"
                                                                                        src=""
                                                                                        style="border:0;display:block;outline:none;text-decoration:none;height:85px;width:100%;font-size:13px;"
                                                                                        width="229"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div align="left"
                                                         style="font-size:0px;padding:10px 25px;padding-top:0;word-break:break-word;">
                                                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
                                                            <p id="referenciaConekta" style="font-size: 22px; text-align:center; font-weight: 500; color: #212247;">
                                                            </p></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation" style="width:100%;">
                                        <div class="content">
                                            <div class="opps-column-per-100">
                                                <div role="presentation" width="100%">
                                                    <div style="vertical-align:top;padding:0;">
                                                        <div role="presentation" width="100%">
                                                            <div align="center" class="section">
                                                                <div style="font-family:Inter, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">
                                                                    <p style="color: #8D8FBA; font-weight: 500; font-size: 14px; line-height: 10px">
                                                                        Debes pagar:</p>
                                                                    <p id="montoConekta" align="center"
                                                                       style="font-weight: 700; font-size: 32px; color: #212247">
                                                                    </p>
                                                                    <p align="center"
                                                                       style="color: #212247; font-weight: 700; font-size: 16px">
                                                                        + Comisión de tienda</p></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                
                                <div style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation" style="width:100%;">
                                        <div class="content">
                                            <div class="opps-column-per-100">
                                                <div role="presentation" style="vertical-align:top;" width="100%">
                                                    <div align="center" class="section">
                                                        <div style="font-family:Inter, sans-serif;font-size:13px;line-height:1;text-align:center;color:#8D8FBA;">
                                                            <p style="font-size: 12px; font-weight: 500">Paga antes del
                                                            <span id="expiresAt"></span></p></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation" style="width:100%;">
                                        <div class="content">
                                            <div class="opps-column-per-100">
                                                <div style="vertical-align:top;" width="100%">
                                                    <div align="left" class="section">
                                                        <div role="presentation" class="section-image">
                                                            <div style="width:20px;">
                                                                <img height="auto" class="image-logo"
                                                                     src="https://assets.conekta.com/templates/cash-in/shapes/shape-c.png"
                                                                     width="20"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                
                                <div align="center" role="presentation"
                                     style="background:#F7F8FD;background-color:#F7F8FD;width:100%;">
                                    <div>
                                        <div style="margin:0px auto;max-width:600px;">
                                            <div align="center" role="presentation" style="width:100%;">
                                                <div style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
                                                    <div class="opps-column-per-100">
                                                        <div role="presentation" style="vertical-align:top;" width="100%">
                                                            <div align="center"
                                                                 style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                                <div style="font-family:Inter, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">
                                                                    <p style="font-size: 20px; font-weight: 700; color: #212247">
                                                                        Sigue los siguientes pasos:</p></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div align="center" role="presentation" style="background:#F7F8FD;background-color:#F7F8FD;width:100%;">
                                    <div>
                                        <div style="margin:0px auto;max-width:600px;">
                                            <div align="center" role="presentation" style="width:100%;">
                                                <div style="direction:ltr;font-size:0px;padding:0 20px 10px 20px;text-align:center;">
                                                    <div class="opps-column-per-33-333333333333336 "
                                                         style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                                        <div role="presentation" style="vertical-align:top;" width="100%">
                                                            <div>
                                                                <div align="left" class="step-icon"
                                                                     style="font-size:0px;padding:0 12px 12px 12px;word-break:break-word;">
                                                                    <div role="presentation" class="section-image">
                                                                        <div style="width:24px;">
                                                                            <img
                                                                                    height="auto"
                                                                                    src="http://assets.conekta.com/templates/cash-in/list/list-icon-store.png"
                                                                                    style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:24px;font-size:13px;"
                                                                            ></div>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div align="left" class="steps-txt"
                                                                         style="font-size:0px;padding:0 12px 0 12px;padding-bottom:20px;word-break:break-word;">
                                                                        <div style="font-family:Inter, sans-serif;font-size:14px;font-weight:700;line-height:20px;text-align:left;color:#585987;">
                                                                            <p>1. Elige la tienda donde pagarás.</p></div>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div align="left"
                                                                         style="font-size:0px;padding:0 12px 0 12px;word-break:break-word;">
                                                                        <div style="font-family:Inter, sans-serif;font-size:14px;font-weight:400;line-height:22px;text-align:left;color:#8D8FBA;">
                                                                            <p>Ve a la tienda más cercana a ti para realizar
                                                                                el pago.</p></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="opps-column-per-33-333333333333336"
                                                         style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                                        <div role="presentation" style="vertical-align:top;" width="100%">
                                                            <div>
                                                                <div align="left" class="step-icon"
                                                                     style="font-size:0px;padding:0 12px 12px 12px;word-break:break-word;">
                                                                    <div role="presentation" class="section-image">
                                                                        <div style="width:24px;">
                                                                            <img
                                                                                    height="auto"
                                                                                    src="http://assets.conekta.com/templates/cash-in/list/list-icon-ticket.png"
                                                                                    style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:24px;font-size:13px;"
                                                                            ></div>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div align="left" class="steps-txt"
                                                                         style="font-size:0px;padding:0 12px 0 12px;word-break:break-word;">
                                                                        <div style="font-family:Inter, sans-serif;font-size:14px;font-weight:700;line-height:20px;text-align:left;color:#585987;">
                                                                            <p>2. Menciona que pagarás Efectivo
                                                                                con Conekta.</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div align="left"
                                                                         style="font-size:0px;padding:0 12px 0 12px;word-break:break-word;">
                                                                        <div style="font-family:Inter, sans-serif;font-size:14px;font-weight:400;line-height:22px;text-align:left;color:#8D8FBA;">
                                                                            <p>Muestra al cajero el código de barras o dicta los
                                                                                números que vienen en la referencia.</p></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="opps-column-per-33-333333333333336 "
                                                         style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                                        <div role="presentation" style="vertical-align:top;"
                                                             width="100%">
                                                            <div>
                                                                <div align="left" class="step-icon"
                                                                     style="font-size:0px;padding:0 12px 12px 12px;word-break:break-word;">
                                                                    <div role="presentation" class="section-image">
                                                                        <div style="width:24px;">
                                                                            <img
                                                                                    height="auto"
                                                                                    src="https://assets.conekta.com/templates/cash-in/list/list-icon-cash.png"
                                                                                    style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:24px;font-size:13px;"
                                                                            ></div>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div align="left" class="steps-txt"
                                                                         style="font-size:0px;padding:0 12px 0 12px;padding-bottom:20px;word-break:break-word;">
                                                                        <div style="font-family:Inter, sans-serif;font-size:14px;font-weight:700;line-height:20px;text-align:left;color:#585987;">
                                                                            <p>3. Realiza tu pago.</p></div>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div align="left"
                                                                         style="font-size:0px;padding:0 12px 0 12px;word-break:break-word;">
                                                                        <div style="font-family:Inter, sans-serif;font-size:14px;font-weight:400;line-height:22px;text-align:left;color:#8D8FBA;">
                                                                            <p>Paga en efectivo y te enviaremos un
                                                                                correo electrónico de confirmación.</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin:0px auto;max-width:600px;">
                        <div align="center" role="presentation" style="width:100%;">
                            <div style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0;text-align:center;">
                                <div class="opps-column-per-100 opps-outlook-group-fix"
                                     style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                    <div role="presentation" style="vertical-align:top;" width="100%">
                                        <div align="center"
                                             style="font-size:0px;padding:0 33px;word-break:break-word;">
                                            <div style="font-family:Inter, sans-serif;font-size:13px;font-weight:600;letter-spacing:1px;line-height:1;text-align:center;color:#000000;">
                                                <p style="font-size: 16px">Tiendas donde puedes pagar:</p></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin:0px auto;max-width:600px;">
                        <div style="width:100%;">
                            <div style="direction:ltr;font-size:0px;padding:16px 33px 0 33px;text-align:center;">
                                <div class="opps-column-per-20">
                                    <div role="presentation" style="vertical-align:middle;" width="100%">
                                        <div align="center" style="font-size:0px;padding:0 0 10px 0;word-break:break-word;">
                                            <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                <div style="width:40px;"><img height="auto"
                                                                              src="https://assets.conekta.com/templates/cash-in/partners/partner-7eleven.png"
                                                                              style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                              width="40"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="opps-column-per-20">
                                    <div style="vertical-align:middle;" width="100%">
                                        <div align="center" class="section">
                                            <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                <div style="width:80px;">
                                                    <img height="auto"
                                                         src="https://assets.conekta.com/templates/cash-in/partners/partner-ahorro.png"
                                                         style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                         width="80">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="opps-column-per-20">
                                    <div role="presentation" style="vertical-align:middle;" width="100%">
                                        <div align="center" class="section">
                                            <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                <div style="width:60px;">
                                                    <img height="auto"
                                                         src="https://assets.conekta.com/templates/cash-in/partners/partner-circlek.png"
                                                         style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                         width="60">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="opps-column-per-20">
                                    <div role="presentation" style="vertical-align:middle;" width="100%">
                                        <div align="center"
                                             style="font-size:0px;padding:5px 0 5px 0;word-break:break-word;">
                                            <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                <div style="width:60px;">
                                                    <img height="auto"
                                                         src="https://assets.conekta.com/templates/cash-in/partners/partner-extra.png"
                                                         style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                         width="60">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="opps-column-per-20">
                                    <div role="presentation" tyle="vertical-align:middle;" width="100%">
                                        <div align="center" style="font-size:0px;padding:5px 0 0 0;word-break:break-word;">
                                            <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                <div style="width:60px;"><img height="auto"
                                                                              src="https://assets.conekta.com/templates/cash-in/partners/partner-benavides.png"
                                                                              style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                              width="60"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin:0px auto;max-width:600px;">
                            <div align="center" role="presentation" style="width:100%;">
                                <div>
                                    <div>
                                        <div style="direction:ltr;font-size:0px;padding:16px 33px 0 33px;text-align:center;">
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:5px 0 0 0;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:60px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-soriana.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="60"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:5px 0 0 0;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:60px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-waldos.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="60"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:0 0 10px 0;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:70px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-eleczion.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="70"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:0 0 10px 0;word-break:break-word;">
                                                                <div role="presentation"
                                                                     style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:70px;">
                                                                                <img height="auto"
                                                                                     src="https://assets.conekta.com/templates/cash-in/partners/partner-san-francisco.png"
                                                                                     style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                     width="70">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:5px 0 5px;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:89px;">
                                                                                <img height="auto"
                                                                                     src="https://assets.conekta.com/templates/cash-in/partners/partner-farmatodo.png"
                                                                                     style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                     width="89">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:5px 0 10px;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:70px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-union.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="70"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin:0px auto;max-width:600px;">
                            <div align="center" role="presentation" style="width:100%;">
                                <div>
                                    <div>
                                        <div style="direction:ltr;font-size:0px;padding:16px 33px 0 33px;text-align:center;">
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center" class="section">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:70px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-kiosko.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="70"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:5px 0 5px;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:70px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-bazar.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="70"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:5px 0 0;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:70px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-woolworth.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="70"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:0 0 10px;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:49px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-delsol.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="49"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:10px 0 5px;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:50px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-yepas.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="50"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="opps-column-per-16-666666666666668"
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
                                                <div role="presentation" style="vertical-align:middle;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center"
                                                                 style="font-size:0px;padding:10px 0 5px;word-break:break-word;">
                                                                <div role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                                                    <div>
                                                                        <div>
                                                                            <div style="width:50px;"><img height="auto"
                                                                                                          src="https://assets.conekta.com/templates/cash-in/partners/partner-alsuper.png"
                                                                                                          style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                                                          width="50"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin:0px auto;max-width:600px;">
                            <div align="center" role="presentation"
                                 style="width:100%;">
                                <div>
                                    <div>
                                        <div style="direction:ltr;font-size:0px;padding:0 27px;text-align:center;">
                                            <div class="opps-column-per-100 "
                                                 style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                                <div role="presentation" style="vertical-align:top;" width="100%">
                                                    <div>
                                                        <div>
                                                            <div align="center" class="section"><p
                                                                    style="border-top:solid 1px lightgrey;font-size:1px;margin:0px auto;width:100%;"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shapes-wrapper" style="margin:0px auto;max-width:600px;">
                        <div align="center" role="presentation" style="width:100%;">
                            <div class="content">
                                <div class="cash-in-oxxo-footer" style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation" style="width:100%;">
                                        <div class="opps-column-per-100">
                                            <div role="presentation" width="100%">
                                                <div role="presentation" width="100%">
                                                    <div align="center"
                                                         style="font-size:0px;padding:0 0 4px 0;word-break:break-word;">
                                                        <div role="presentation" class="section-image">
                                                            <div style="width:26px;"><img height="auto" class="image-logo"
                                                                                          src="images/isotype.png"
                                                                                          width="26"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div align="center" class="section">
                                                        <div style="font-family:Inter, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">
                                                            <h3 style="font-weight: 500; font-size: 14px; color: #585987">
                                                                ¿Tienes dudas?</h3>
                                                            <p style="color: #8d8fba; font-size: 14px; font-weight: 400; line-height: 20px">
                                                                Ingresa a <span><a style="color: #2c4cf5"
                                                                                   href="https://help.conekta.com"
                                                                                   target="_blank">https://help.conekta.com</a></span>
                                                            </p></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin:0px auto;max-width:600px;">
                                    <div align="center" role="presentation" style="width:100%;">
                                        <div class="content">
                                            <div class="opps-column-per-100">
                                                <div role="presentation" style="vertical-align:top;" width="100%">
                                                    <div align="right" class="section">
                                                        <div role="presentation" class="section-image">
                                                            <div style="width:100px;">
                                                                <img height="auto" class="image-logo"
                                                                     src="https://assets.conekta.com/templates/cash-in/shapes/shape-d.png"
                                                                     width="100"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
                  <!-- <form action="dompdf.php" method="post"> -->
                  <div style="display: none;">
                    <input type="text" name="montoConekta" id="montoConekta">
                    <input type="text" name="referenciaConekta" id="referenciaConekta">
                  </div>
                  <button class="btn-oxxo" type="submit">Descargar</button>
                </form>
              </div>
          </div>
      </div>
    </section>
    </div>
    <!--FOOTER-->
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row mx-4">
                <!-- Logo and Social Media -->
                <div class="col-lg-3 col-sm-6 mb-3">
                    <img src="assets/images/logo-telmovil-blanco.png" alt="Telmovil Logo" class="img-fluid mb-3" width="160">
                    <div>
                        <a href="https://api.whatsapp.com/send/?phone=525639436537&text&app_absent=0" target="_blank"><i class="logos-redes bi bi-whatsapp mx-2"></i></a>
                        <a href="https://www.facebook.com/telmovilmx" target="_blank"><i class="logos-redes bi bi-facebook mx-2"></i></a>
                        <a href="https://www.youtube.com/channel/UCNYbMkl_r67NXdXt5x5ur6A" target="_blank"><i class="logos-redes bi bi-youtube mx-2"></i></a>
                        <a href="https://www.tiktok.com/@telmovil.mx" target="_blank"><i class="logos-redes bi bi-tiktok mx-2"></i></a>
                        
                    </div>
                </div>
                <!-- Sobre Nosotros -->
                <div class="col-lg-2 col-sm-6 ">
                    <h5 class="mb-0">Sobre Nosotros</h5>
                    <ul class="list-unstyled">
                        <li><a href="acerca-de-nosotros.html">Acerca de Telmovil</a></li>
                        <li><a href="cobertura.html">Cobertura Telmovil</a></li>
                        <li><a href="https://www.youtube.com/@telmovilmx4998/videos">Videos tutoriales</a></li>
                        <li><a href="https://www.telmov.mx/?srsltid=AfmBOopWWHqq69XsSLs9y-9D6Z82INipaRRtWDS18rOmb28jR7eeSNxc">Telmov</a></li>
                        <li><a href="#">TelmovPay</a></li>
                        <li><a href="#">Antenabay</a></li>
                        <li><a href="validaIMEI.php">Compatibilidad</a></li>
                        <li><a href="sucursales.html">Sucursales</a></li>
                        <!-- <li><a href="#">Trabaja con nosotros</a></li> -->
                    </ul>
                </div>
                <!-- Seguridad -->
                <div class="col-lg-2 col-sm-6">
                    <h5 class="mb-0">Ayuda</h5>
                    <ul class="list-unstyled">
                        <li><a href="atencion-clientes.html">Atención a clientes</a></li>
                        <li><a href="facturacion.html">Facturación</a></li>
                        <li><a href="suspension.html">Suspensión Robo/Extravío</a></li>
                        <li><a href="preguntas-frecuentes.html">Preguntas frecuentes</a></li>
                        <li><a href="https://telmovil.mx/Sistema-Atencion-Quejas.pdf">Centro de Atención de Quejas</a></li>
                    </ul>
                </div>
                <!-- Legales -->
                <div class="col-lg-2 col-sm-6">
                    <h5 class="mb-0">Legales</h5>
                    <ul class="list-unstyled">
                        <li><a href="aviso-privacidad.html">Aviso de Privacidad</a></li>
                        <li><a href="terminos-condiciones.html">Términos y Condiciones</a></li>
                        <li><a href="https://telmovil.mx/Colaboracion-Seguridad-Justicia.pdf">Colaboración Seguridad y Justicia</a></li>
                        <li><a href="legales.html">Documentos Legales</a></li>
                        <li><a href="codigo-politicas.html">Código de Neutralidad de Red</a></li>
                    </ul>
                </div>
                <!-- Contact -->
                <div class="col-lg-3 col-sm-6">
                    <h5 class="mb-2">Encuéntranos</h5>
                    <p><i class="bi bi-geo-alt-fill mx-2"></i>Av. Eje Central Lázaro Cárdenas No. 49, Interior C, Col. Centro, Alcaldía Cuauhtémoc. C.P. 06000, CDMX, México.</p>
                    <p><i class="bi bi-clock-fill mx-2"></i>Soporte: 222 o 55 8957 7777 y 800 0700 069</p>
                </div>
            </div>

            <!-- Divider -->
            <hr class="footer-hr">

            <div class="row mx-4">
                <!-- Grupo Logos -->
                <div class="col-lg-8">
                    <div class="footer-logos">
                        <p class="mb-1"><small>Grupo Telmov</small></p>
                        <img src="assets/images/logo-telmov-blanco.svg" alt="Grupo 1" width="70">
                        <img src="assets/images/logo-telmovil-blanco.png" alt="Grupo 2" width="50">
                        <img src="assets/images/logo-antena-blanco.png" alt="Grupo 3" width="50">
                        <img src="assets/images/logo-telmovpay-blanco.png" alt="Grupo 4" width="75">
                    </div>
                </div>
                <!-- Payment Logos -->
                <div class="col-lg-4 text-end">
                    <div class="payment-logos">
                        <p class="text-start mb-2"><small>Medios de pago</small></p>
                        <img src="assets/images/medios-de-pago.png" alt="Medios de Pago" width="415" class="img-fluid">
                        <!-- <img src="mastercard.png" alt="MasterCard">
                        <img src="paypal.png" alt="PayPal"> -->
                        
                    </div>
                </div> 
            </div>
        </div>
    </footer>
        <!-- BOTON SUBE -->
        <div class="btn-sube">
            <a href="#cabecera"><img src="images/flecha.svg" alt="Sube"></a>
        </div>
        <!-- BOTON WHATS -->
        <div class="btn-whats">
            <a href="https://api.whatsapp.com/send/?phone=525639436537&text&app_absent=0" target="_blank">
                    <img src="images/whatsapp.svg" alt="WhatsApp" title="Atención a clientes">
                </a>
        </div>
        <!-- BOTON MODO OSCURO -->
        <div class="switch">
            <img class="btn-sun" src="images/sol.svg" alt="">
            <img class="btn-moon" src="images/luna.svg" alt="">
        </div>
        <!-- MODAL RECARGAS -->
        <div class="modal fade" id="recargas-btns" tabindex="-1" aria-labelledby="recargas-btns" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title titulo-modal" id="exampleModalLabel">Recargas</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-12 cont-recargas">
                                <img class="img-cel-pre" src="images/icon-cel-r.svg" alt="">
                            </div>
                            <div class="col-12 cont-recargas2">
                            <a class="btn btn-recarga-gen" href="recarga-tu-telmovil.php">Recargar mi Telmovil</a>
                        </div>
                            <div class="col-12 text-center mt-3 mb-2">
                                <img class="img-preplanes" src="images/preplan.svg" alt="">
                            </div>
                            <div class="col-12 cont-recargas2 mb-5">
                                <a class="btn btn-recarga-gen" href="recarga-preplanes.php">Recargar mi PrePlan</a>
                            </div>
                        </div>
                    </div>
                    </div>
                    <!--
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                    -->
                </div>
            </div>
        </div>
        <!--CARGA DE JS-->
        <script>
            $('input[name="tarjeta"]').mask('0000 0000 0000 0000');
            $('input[name="fecha"]').mask('00/00');
        </script>
        <script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="js/redpay.js"></script>
        <script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script type="text/javascript" src="js/sitio.js"></script>
</body>
</html>