/* Registro (/registro): pantalla completa, una columna centrada, sin menú ni pie. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;background:#fff;color:#19274d;font-family:Poppins,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:#19274d}
.rg{width:100%;max-width:500px;margin:0 auto;padding:56px 20px 64px;text-align:center}
.rg-logo{display:inline-block;margin-bottom:34px}
.rg-logo img{display:block;height:46px;width:auto}
h1{margin:0 0 10px;font-size:26px;font-weight:600;color:#2d3e50}
.rg-sub{margin:0 0 28px;font-size:17px;color:#5f6b7a}

/* Botones de Google y Microsoft */
.rg-prov{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin:0 0 8px;padding:0 20px 0 52px;border:1px solid #c3c9d1;border-radius:30px;background:#fff;color:#19274d;font:inherit;font-size:16px;cursor:pointer;box-shadow:0 4px 14px rgba(25,39,77,.12);transition:box-shadow .2s,transform .2s,background .2s}
.rg-prov:hover{background:#f7faf9;box-shadow:0 6px 18px rgba(25,39,77,.18)}
.rg-prov:active{transform:translateY(1px)}
.rg-ico{position:absolute;left:16px;top:50%;width:22px;height:22px;margin-top:-11px}

/* Separador «o» */
.rg-o{display:flex;align-items:center;gap:14px;margin:14px 0 22px;color:#5f6b7a;font-size:15px}
.rg-o::before,.rg-o::after{content:"";flex:1;height:1px;background:#cfd6dd}

/* Campos */
input[type=text],input[type=email],input[type=tel],input[type=password],select{display:block;width:100%;height:50px;margin:0 0 16px;padding:0 18px;border:1px solid #c3c9d1;border-radius:8px;background:#fff;color:#19274d;font:inherit;font-size:16px;outline:none;transition:box-shadow .2s,border-color .2s}
input:focus,select:focus{border-color:#32c788;box-shadow:0 0 0 3px rgba(50,199,136,.22)}
input.rg-mal{border-color:#d9534f}
label{display:block;margin:0 0 6px;text-align:left;font-size:14px;color:#2d3e50}
.rg-vis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2332c788' stroke-width='2'/></svg>") no-repeat right 18px center}
.rg-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Botón principal */
.rg-principal{display:block;width:100%;height:50px;margin:0;border:0;border-radius:30px;background:#32c788;color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}
.rg-principal:hover{background:#28a870}
.rg-principal:active{transform:translateY(1px)}
.rg-principal[disabled]{opacity:.6;cursor:default}
.rg-enlace{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff}

/* Avisos y textos pequeños */
.rg-aviso{min-height:22px;margin:12px 0 0;font-size:14px;color:#c0392b}
.rg-aviso:empty{min-height:0;margin:0}
.rg-nota{margin:-8px 0 16px;text-align:left;font-size:13px;color:#5f6b7a}
.rg-nota.ok{color:#1fa36d}.rg-nota.no{color:#c0392b}
.rg-legal{margin:22px 0 0;font-size:14px;line-height:1.6;color:#5f6b7a}
.rg-login{margin:24px 0 0;font-size:15px;color:#5f6b7a}
.rg-login a{font-weight:600}
#rg-login{margin-top:18px;text-align:left}
.rg-sufijo{display:flex;align-items:stretch;margin:0 0 16px}
.rg-sufijo input{margin:0;border-top-right-radius:0;border-bottom-right-radius:0;min-width:0}
.rg-sufijo span{display:flex;align-items:center;padding:0 14px;border:1px solid #c3c9d1;border-left:0;border-radius:0 8px 8px 0;background:#f4fbf8;color:#5f6b7a;font-size:15px;white-space:nowrap}
#rg-form{text-align:left}
#rg-form .rg-sufijo{margin-bottom:8px}
/* Interruptores (en lugar de casillas) */
.rg-sw{position:relative;display:flex;gap:12px;align-items:flex-start;margin:18px 0 20px;font-size:14px;line-height:1.5;color:#5f6b7a;cursor:pointer}
.rg-sw-wa{align-items:center;margin:2px 0 4px;font-size:15px;color:#2d3e50}
.rg-sw input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer}
.rg-sw-pista{position:relative;flex:none;width:44px;height:24px;margin-top:0;border-radius:24px;background:#cfd6dd;transition:background .2s}
.rg-sw-pista::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.rg-sw input:checked+.rg-sw-pista{background:#32c788}
.rg-sw input:checked+.rg-sw-pista::after{transform:translateX(20px)}
.rg-sw input:focus-visible+.rg-sw-pista{box-shadow:0 0 0 3px rgba(50,199,136,.35)}
.rg-sw-txt{flex:1;min-width:0}
.rg-check{display:flex;gap:10px;align-items:flex-start;margin:18px 0 20px;font-size:14px;line-height:1.5;color:#5f6b7a;cursor:pointer}
.rg-check input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:#32c788}
.rg-listo{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:#32c788;color:#fff;font-size:38px}
/* Teléfono: lista de países (con bandera) a la izquierda y el número a la derecha, en un solo control */
.rg-tel{position:relative;display:flex;align-items:stretch;margin:0 0 16px;border:1px solid #c3c9d1;border-radius:8px;background:#fff;transition:box-shadow .2s,border-color .2s}
.rg-tel:focus-within{border-color:#32c788;box-shadow:0 0 0 3px rgba(50,199,136,.22)}
.rg-tel>input{flex:1;min-width:0;height:48px;margin:0;border:0;border-radius:0 8px 8px 0;box-shadow:none}
.rg-tel>input:focus{box-shadow:none}
.rg-pais{display:flex;align-items:center;gap:8px;flex:none;height:48px;padding:0 12px 0 14px;border:0;border-right:1px solid #e1e5ea;border-radius:8px 0 0 8px;background:#f4fbf8;color:#19274d;font:inherit;font-size:16px;cursor:pointer}
.rg-pais:hover{background:#e9f7f1}
.rg-pais img{display:block;width:22px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.rg-paises{position:absolute;z-index:20;left:0;top:calc(100% + 6px);width:100%;max-width:360px;border:1px solid #c3c9d1;border-radius:8px;background:#fff;box-shadow:0 10px 28px rgba(25,39,77,.2)}
.rg-paises>input{height:42px;margin:8px;width:calc(100% - 16px);font-size:15px}
.rg-paises ul{max-height:260px;margin:0;padding:0 0 6px;overflow-y:auto;list-style:none}
.rg-paises li{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:15px;cursor:pointer;text-align:left}
.rg-paises li img{flex:none;width:22px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.rg-paises li span{flex:1;min-width:0}
.rg-paises li b{flex:none;font-weight:500;color:#5f6b7a}
.rg-paises li:hover,.rg-paises li.sel{background:#f4fbf8}
.rg-paises li[aria-selected=true]{font-weight:600}
.rg-paises .rg-vacio{padding:10px 14px;color:#5f6b7a;font-size:14px}
[hidden]{display:none!important}

@media (max-width:520px){.rg{padding-top:36px}h1{font-size:23px}.rg-sub{font-size:16px}}

/* Verificar el correo */
.rg-vista-codigo .rg-logo{position:fixed;left:30px;top:24px;margin:0}
.rg-vista-codigo .rg-logo img{height:36px}
.rg-vista-codigo{padding-top:110px}
.rg-ilus{display:block;margin:0 auto 14px;width:150px;height:auto}
.rg-digitos{display:flex;justify-content:center;gap:12px;margin:0 0 24px}
.rg-digitos input{width:50px;height:50px;margin:0;padding:0;text-align:center;font-size:22px;font-weight:600;border-radius:8px}
.rg-digitos.rg-mal input{border-color:#d9534f;animation:rg-sacude .3s}
.rg-reenvio a[aria-disabled=true]{color:#8a94a8;text-decoration:none;pointer-events:none;font-weight:400}
@keyframes rg-sacude{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (max-width:520px){.rg-vista-codigo .rg-logo{left:16px;top:16px}.rg-vista-codigo{padding-top:90px}.rg-digitos{gap:8px}.rg-digitos input{width:44px;height:48px}}

/* Código de verificación mostrado en pantalla (mientras el servidor no envía correos) */
.rg-demo{margin:0 auto 18px;max-width:360px;padding:12px 16px;border:2px dashed #32c788;border-radius:10px;background:#f1fbf6;color:#19274d;font-size:14px;text-align:center}
.rg-demo b{display:block;margin-top:4px;font-size:30px;letter-spacing:8px;font-weight:700}

/* Mientras se decide si la persona llegó por un plan, no se muestra el formulario (evita un destello antes de ir a precios) */
body.rg-cargando .rg{visibility:hidden}

/* Datos de facturación: dos columnas (datos a la izquierda, detalle del cobro a la derecha); en el celular, una debajo de la otra */
.rg.rg-vista-fac{max-width:980px}
.rg-fac-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:36px;align-items:start;text-align:left}
#rg-form-fac{text-align:left}
.rg-der{position:sticky;top:24px}
.rg-resumen{border:1px solid #cfe9dd;border-radius:14px;background:#f4fbf8;padding:24px 26px}
.rg-resumen h2{margin:0 0 16px;font-size:18px;font-weight:600;color:#2d3e50}
.rg-res-fila{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid #dbeee5;font-size:15px;color:#2d3e50}
.rg-res-fila span:last-child{text-align:right;font-weight:600}
.rg-res-fila.hoy{border-bottom:0;padding-top:14px;font-size:17px}
.rg-res-fila.hoy span:last-child{font-size:24px;color:#1fa36d}
.rg-res-notas{margin:14px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.4;color:#5f6b7a}
.rg-res-notas li{position:relative;padding:0 0 3px 26px}
.rg-res-notas li::before{content:"✓";position:absolute;left:0;top:0;color:#32c788;font-weight:700}
@media (max-width:820px){.rg.rg-vista-fac{max-width:500px}.rg-fac-grid{grid-template-columns:minmax(0,1fr);gap:24px}.rg-der{position:static}}

/* Dos campos en la misma fila (tipo y número de documento) */
.rg-fila2{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:14px}
@media (max-width:420px){.rg-fila2{grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:10px}}

/* El botón de pago va en la columna del detalle, debajo de las notas */
.rg-resumen .rg-principal{margin-top:18px}
.rg-resumen .rg-aviso{text-align:center}

/* País y ciudad en la misma fila; los medios de pago de ePayco bajo el detalle */
.rg-fila-pc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rg-medios{display:block;width:100%;height:auto;margin-top:14px}

/* En la ventana de facturación el logo va en la esquina superior izquierda (en el celular se queda centrado arriba) */
@media (min-width:821px){.rg-vista-fac .rg-logo{position:absolute;left:30px;top:24px;margin:0}.rg-vista-fac .rg-logo img{height:36px}.rg.rg-vista-fac{padding-top:90px}}

/* Tarjeta de crédito dentro de la ventana de facturación */
.rg-h2{margin:22px 0 4px;font-size:18px;font-weight:600;color:#2d3e50;text-align:left}

/* Ventana de pago: la tarjeta se pide en una ventana propia que abre el botón «Pagar con ePayco» */
.rg-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(25,39,77,.55)}
.rg-modal[hidden]{display:none}
.rg-modal-caja{width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:16px;padding:22px 24px 20px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.rg-modal-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rg-modal-cab h2{margin:0;font-size:19px;font-weight:600;color:#2d3e50}
.rg-modal-x{border:0;background:none;font-size:28px;line-height:1;color:#6b7280;cursor:pointer;padding:0 4px}
.rg-modal .rg-nota{margin:0 0 12px}
.rg-fila3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
body.rg-modal-abierto{overflow:hidden}
.rg-modal .rg-aut{margin:14px 0 18px;font-size:13px;color:#5f6b7a}

/* Aprovisionamiento: se oculta todo menos el logo y el indicador va al centro de la pantalla */
.rg.rg-vista-prov{max-width:560px;min-height:100vh;display:flex;flex-direction:column;padding-top:28px}
.rg-vista-prov .rg-logo{position:fixed;left:30px;top:24px;margin:0}
.rg-vista-prov .rg-logo img{height:36px}
@media (max-width:520px){.rg-vista-prov .rg-logo{left:16px;top:16px}}
#rg-prov{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:12vh}
#rg-prov[hidden]{display:none}
.rg-cargador{width:56px;height:56px;border:5px solid #e3f5ec;border-top-color:#32c788;border-radius:50%;animation:rg-gira 0.9s linear infinite}
.rg-prov-msg{margin:26px 0 4px;font-size:20px;font-weight:600;color:#2d3e50}
@keyframes rg-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rg-cargador{animation-duration:2.4s}}
.rg-acceso{margin:20px auto 8px;max-width:380px;text-align:left;background:#f1fbf6;border:1px solid #c9ecd9;border-radius:12px;padding:6px 16px}
.rg-acceso div{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid #dff3e8}
.rg-acceso div:last-child{border-bottom:0}
.rg-acceso dt{font-size:13px;color:#5f6b7a}
.rg-acceso dd{margin:0;font-weight:600;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}
#rg-final .rg-principal{margin-top:18px}

/* «Tu cuenta está lista»: el logo arriba a la izquierda y los datos de acceso con la dirección primero */
.rg.rg-vista-final{max-width:600px;padding-top:110px}
.rg-vista-final .rg-logo{position:fixed;left:30px;top:24px;margin:0}
.rg-vista-final .rg-logo img{height:36px}
@media (max-width:520px){.rg-vista-final .rg-logo{left:16px;top:16px}.rg.rg-vista-final{padding-top:90px}}
.rg-acceso dd a{color:#1fa36d}
#rg-final .rg-sub{text-align:justify}

/* «Completa tu cuenta»: el logo arriba a la izquierda */
.rg.rg-vista-datos{padding-top:110px}
.rg-vista-datos .rg-logo{position:fixed;left:30px;top:24px;margin:0}
.rg-vista-datos .rg-logo img{height:36px}
@media (max-width:520px){.rg-vista-datos .rg-logo{left:16px;top:16px}.rg.rg-vista-datos{padding-top:90px}}

#rg-final-nota{margin-top:30px}

/* Cloudflare Turnstile en el formulario del correo */
.rg-ts{display:flex;justify-content:center;margin:0 0 14px;min-height:0}