<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="TELMOVIL, TELEFONIA, CAMBIO DE NUMERO">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Telmovil | Cambio de número</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">

        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></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>
        <!--TITULO-->
        <section class="titulo-cn">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <h1>Cambio de número</h1>
                    </div>
                </div>
            </div>
        </section>
        <!--CAMBIO NUMERO-->
        <section class="contenido-cambio sec-form mt-5">
            <div id="loadingscreen">
                <img src="images/oval.svg">
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2>Cambia tu número</h2>
                        <p class="mt-3">Aquí puedes cambiar tu lada y usar la que prefieras.</p>
                        <p class="advertencia mt-4">¡Advertencia, solo puedes realizar 3 cambios de número!</p>
                        <p class="p-cambio">Al realizar el cambio de número se perderá toda la información de tu cuenta actual y será irreversible.</p>
                        <section class="sec-form">
                            <div id="stepOne">
                                <div class="caja-form">
                                    <form class="contenido-form" id="validNumberForm">
                                        <div class="row elementos-form">
                                            <div class="col-md-6 col-12" id="grupo__celular">
                                                <label for="formGroupExampleInput">Ingresa tu número actual Telmovil</label>
                                                <div class="formulario-grupo-input">
                                                    <input type="tel" class="form-control campo-tel" name="celular" id="celular" placeholder="ej. 5512345678" minlength="10" maxlength="10" required>
                                                    <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="w-100"></div>
                                            <div class="form-group caja-select col-md-6 mt-1">
                                                <label>Quiero mi número de</label>
                                                <select name="nirList" id="nirList" class="form-control" required>
                                                    <option value="" selected>Selecciona una lada</option>
                                                </select>
                                            </div>
                                            <div class="w-100"></div>
                                            <div class="text-center col-md-6">
                                                <br>
                                                <button class="btn-cambio mb-5" type="submit">Continuar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="stepTwo">
                                <div class="caja-form">
                                    <form class="contenido-form" id="changeNumberForm">
                                        <div class="row elementos-form">
                                            <div class="col-md-6 col-12 mt-3" id="grupo__pin">
                                                <label for="numero">Ingresa el código que te llegará en un SMS</label>
                                                <div class="formulario-grupo-input">
                                                    <input type="text" class="form-control" name="pin" id="pin" placeholder="Ingresa el código" maxlength="6">
                                                    <i class="formulario-validacion-estado fas fa-times-circle"></i>
                                                </div>
                                                <p class="form-input-error">El código debe ser de 6 dígitos y solo números.</p>
                                            </div>
                                            <div class="w-100"></div>
                                            <div class="text-center col-md-6">
                                                <div class="form-group tc-cambio">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="cambioNumero" required>&nbsp;
                                                        <label class="form-check-label" for="cambioNumero">
                                                            <a href="#">Acepto términos y condiciones</a>
                                                        </label>
                                                    </div>
                                                </div>
                                                <button class="btn-cambio mb-5" type="submit">Continuar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </section>
        <!--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 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/cambioDN.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>