/* NexTal — registro de cuentas de prueba para empresas. Medidas del diseño a 1536 px; la escena mide 1536 × 960. */
.reg{position:relative;min-height:960px;overflow:hidden;background:#0A2170}
/* A los lados de la escena (pantallas anchas o composición escalada) continúan los colores de sus bordes, fila por fila. */
@media (min-width:1181px){
  .reg{background:url("../img/registro/borde-izq.png") 0 0 / 50% 100% no-repeat,url("../img/registro/borde-der.png") 100% 0 / 50% 100% no-repeat}
  .reg-fondo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent)}
}
.reg-arte{position:absolute;top:0;left:max(0px,calc(50% - 768px));width:1536px;height:960px;pointer-events:none}
.reg-fondo{position:absolute;max-width:none}
.reg-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 674px;gap:0 40px;max-width:1536px;margin:0 auto;padding:19px 38px 29px 82px}

/* ------------------------------------------------------------ presentación (sobre el panel azul) */
.reg-intro{padding-top:28px;color:#FFF;max-width:470px}
.reg-marca{display:inline-flex;align-items:center;justify-content:center;width:155px;height:55px;border-radius:8px;background:#FFF;box-shadow:0 6px 18px rgb(0 0 0 / .18)}
.reg-marca img{width:138px;height:auto}
.reg-intro h2{margin:21px 0 0;font-size:47px;line-height:46px;font-weight:800;letter-spacing:-.022em;color:#FFF}
.reg-intro h2 .reg-salto{display:block}
.reg-intro h2 em{display:block;font-style:normal;color:#2A9BFF}
.reg-lead{max-width:350px;margin:12px 0 0;font-size:19.5px;line-height:25px;color:#E1E8FA}
.reg-rasgos{display:flex;flex-direction:column;gap:19px;margin:24px 0 0;padding:0;list-style:none}
.reg-rasgos li{display:flex;align-items:flex-start;gap:21px}
.reg-rasgo-ico{flex:none;display:grid;place-items:center;width:61px;height:61px;border-radius:9px;background:rgb(255 255 255 / .07);border:1px solid rgb(120 160 255 / .35);color:#5AA7FF}
.reg-rasgo-ico svg{width:30px;height:30px}
.reg-rasgos div{display:flex;flex-direction:column;padding-top:1px}
.reg-rasgos b{font-size:18.5px;line-height:24px;font-weight:700;color:#FFF}
.reg-rasgos span{margin-top:3px;max-width:236px;font-size:14.6px;line-height:19.5px;color:#D4DDF5}

/* ------------------------------------------------------------ tarjetas flotantes (coordenadas de la escena)
   Todo se mide en --u (1px en escritorio; en celular, una fracción del ancho de la ilustración) y se ubica restando el
   recorte de la escena (--ox, --oy), así la persona y las tarjetas escalan y se mueven juntas. */
.reg-arte{--u:1px;--ox:0;--oy:0}
.reg-fondo{left:calc(var(--ox) * var(--u) * -1);top:calc(var(--oy) * var(--u) * -1);width:calc(1536 * var(--u));height:calc(960 * var(--u))}
.reg-flot{position:absolute;left:calc((var(--x) - var(--ox)) * var(--u));top:calc((var(--y) - var(--oy)) * var(--u));padding:calc(18 * var(--u)) calc(20 * var(--u));
  border-radius:calc(14 * var(--u));background:#FFF;box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgb(12 30 80 / .22);color:#0B1F4D;rotate:-4deg;
  font-size:calc(14 * var(--u));animation:reg-flotar 7s ease-in-out infinite}
@keyframes reg-flotar{0%,100%{translate:0 0}50%{translate:0 calc(-4 * var(--u))}}
@media (prefers-reduced-motion:reduce){.reg-flot{animation:none}}
.reg-flot>b{display:block;font-size:calc(14 * var(--u));font-weight:700}
.reg-flot ul{margin:0;padding:0;list-style:none}
.reg-evaluados{--x:80;--y:722;width:calc(256 * var(--u));height:calc(176 * var(--u))}
.reg-evaluados ul{display:flex;flex-direction:column;gap:calc(6 * var(--u));margin-top:calc(10 * var(--u))}
.reg-evaluados li{display:flex;align-items:center;gap:calc(14 * var(--u));font-size:calc(14 * var(--u));color:#3E4A63}
.reg-evaluados img{flex:none;width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:50%;object-fit:cover}
.reg-evaluados i{flex:1 1 auto;height:calc(8 * var(--u));border-radius:calc(4 * var(--u));background:linear-gradient(90deg,#1FA774 var(--p),#E3E8F0 var(--p))}
.reg-evaluados .p95{--p:88%}.reg-evaluados .p88{--p:70%}.reg-evaluados .p76{--p:52%}
.reg-evaluados span{width:calc(34 * var(--u));text-align:right}
.reg-compat{--x:346;--y:712;width:calc(266 * var(--u));height:calc(160 * var(--u));animation-delay:-3s}
.reg-compat>div{display:flex;align-items:center;gap:calc(14 * var(--u));margin-top:calc(10 * var(--u))}
.reg-anillo{flex:none;width:calc(90 * var(--u));height:calc(90 * var(--u))}
.reg-anillo circle{fill:none;stroke-width:11}
.reg-anillo .fondo{stroke:#D7E6FD}
.reg-anillo .valor{stroke:#1C66E8;stroke-dasharray:231 251.3;transform:rotate(-90deg);transform-origin:50px 50px}
.reg-anillo text{font:700 21px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;fill:#0B1F4D}
.reg-compat li{display:flex;align-items:center;gap:calc(10 * var(--u));margin-bottom:calc(8 * var(--u));font-size:calc(13 * var(--u));color:#3E4A63}
.reg-compat .reg-chk{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.reg-chk{flex:none;width:18px;height:18px}
.reg-chk circle{fill:#1FA774}

/* ------------------------------------------------------------ tarjeta del formulario */
.reg-tarjeta{align-self:start;position:relative;min-height:912px;padding:28px 36px 22px 42px;border-radius:18px;background:#FFF;box-shadow:0 20px 50px rgb(12 30 80 / .14);color:#0B1F4D}
.reg-chip{display:inline-flex;align-items:center;gap:7px;height:28px;margin:0;padding:0 11px;border-radius:7px;background:#E6EEFC;color:#1F4FC7;font-size:12.5px;font-weight:700}
.reg-chip svg{width:15px;height:15px}
.reg-tarjeta h1{margin:9px 0 0;font-size:35.5px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:#0B1F4D}
.reg-sub{margin:8px 0 0;font-size:16.5px;line-height:21px;color:#4F5B70}
.reg-sub .reg-salto{display:block}
.reg-incluye{display:flex;align-items:center;gap:24px;margin:13px 0 0 -10px;padding:14px 14px 14px 29px;width:calc(100% + 18px);border-radius:12px;background:#EEF4FD}
.reg-regalo{flex:none;width:40px;height:40px}
.reg-incluye ul{display:grid;grid-template-columns:212px 268px;gap:6px 18px;margin:0;padding:0;list-style:none}
.reg-incluye li{display:flex;align-items:flex-start;gap:12px;font-size:13.2px;line-height:19px;letter-spacing:-.01em;color:#3A4659}
.reg-incluye .reg-chk{width:20px;height:20px;margin-top:0}
.reg-error{margin:14px 0 0;padding:10px 14px;border:1px solid #F3C7C0;border-radius:8px;background:#FDF1EF;color:#9B2C1F;font-size:14px}
.reg-form{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.reg-fila{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.reg-campo{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:14.5px;font-weight:500;color:#26324A}
.reg-control{position:relative;display:block}
.reg-control>svg{position:absolute;left:14px;top:50%;width:19px;height:19px;margin-top:-9.5px;color:#4A5568;pointer-events:none}
.reg-control input,.reg-control select{width:100%;height:39px;padding:0 46px 0 52px;border:1px solid #CFD8E3;border-radius:6px;background:#FFF;font:inherit;font-size:15px;font-weight:400;color:#0B1F4D;transition:border-color .15s,box-shadow .15s}
.reg-control input::placeholder{color:#6B7588;opacity:1}
.reg-control input:focus,.reg-control select:focus{outline:none;border-color:#1F6BF0;box-shadow:0 0 0 3px rgb(31 107 240 / .15)}
.reg-control input:user-invalid,.reg-control select:user-invalid{border-color:#C0392B}
.reg-select select{appearance:none;-webkit-appearance:none;cursor:pointer;color:#0B1F4D}
.reg-select select:invalid{color:#6B7588}
.reg-select::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.8px solid #26324A;border-bottom:1.8px solid #26324A;transform:rotate(45deg);pointer-events:none}
.reg-ver{position:absolute;right:8px;top:50%;display:grid;place-items:center;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:6px;background:none;color:#26324A;cursor:pointer}
.reg-ver:hover{background:#F1F4F9}
.reg-ver svg{width:21px;height:21px}
.reg-ver[aria-pressed="true"] .tachado{display:none}
.reg-consent{display:flex;align-items:flex-start;gap:13px;margin-top:4px;font-size:14.5px;line-height:20px;color:#3A4659}
.reg-consent input{flex:none;width:21px;height:21px;margin:0;accent-color:#1F4FC7;cursor:pointer}
.reg-consent a{color:#1F4FC7}
.reg-enviar{display:flex;align-items:center;justify-content:center;gap:12px;height:46px;margin-top:0;border:0;border-radius:6px;background:#0A2472;color:#FFF;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;transition:background .15s,box-shadow .15s}
.reg-enviar:hover{background:#071B5C;box-shadow:0 8px 20px rgb(10 36 114 / .25)}
.reg-enviar svg{width:20px;height:20px}
.reg-pie{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 0;font-size:13.5px;color:#4F5B70}
.reg-pie::before,.reg-pie::after{content:"";flex:1 1 auto;height:1px;background:#DDE4EE}
.reg-pie span{margin-left:10px}
.reg-pie a{margin-right:10px;color:#1F4FC7;font-weight:700;font-size:14.5px}
.reg .trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------ pantallas medianas y pequeñas */
/* Sin JavaScript (sin escalado uniforme), entre 1181 y 1400 px se recompone el ancho del formulario. */
@media (max-width:1400px){
  .reg:not([style*="zoom"]) .reg-incluye ul{grid-template-columns:1fr 1fr}
  .reg:not([style*="zoom"]) .reg-in{grid-template-columns:minmax(0,1fr) minmax(0,600px);padding-left:56px;padding-right:28px}
  .reg:not([style*="zoom"]) .reg-tarjeta{padding-left:34px;padding-right:30px}
}
@media (max-width:1180px){
  /* Tableta: el panel izquierdo del diseño (824 × 960, a escala real) con la presentación encima y el formulario debajo. */
  .reg{display:grid;grid-template-columns:minmax(0,824px);justify-content:center;min-height:0;
    background:linear-gradient(#E4ECF8,#E4ECF8) 0 960px / 100% 100% no-repeat,linear-gradient(90deg,#0A2170 0 50%,#DCE7F6 50% 100%)}
  .reg-in{display:contents}
  .reg-arte{grid-area:1 / 1;position:relative;left:auto;width:824px;height:960px;overflow:hidden}
  .reg-intro{grid-area:1 / 1;position:relative;z-index:1;align-self:start;max-width:552px;padding:47px 0 0 82px}
  .reg-tarjeta{grid-area:2 / 1;min-height:0;width:calc(100% - 48px);max-width:720px;margin:-24px auto 40px;z-index:1}
}
@media (max-width:760px){
  /* Celular: presentación, luego la ilustración (persona y tarjetas, recortada y escalada) y el formulario. */
  .reg{grid-template-columns:minmax(0,1fr);background:#E4ECF8}
  .reg-intro{grid-area:1 / 1;max-width:none;padding:24px 16px 22px;background:#0A2170}
  /* Recorte de la escena que incluye a la persona y las dos tarjetas en su lugar original (tapan las de la imagen). */
  .reg-arte{grid-area:2 / 1;width:100%;height:auto;aspect-ratio:770 / 790;container-type:inline-size;--ox:50;--oy:170}
  .reg-arte>*{--u:calc(100cqw / 770)}
  .reg-tarjeta{grid-area:3 / 1;width:calc(100% - 24px);margin:-18px auto 28px}
  .reg-intro h2{font-size:34px;line-height:36px}
  .reg-lead{max-width:none;font-size:16.5px;line-height:22px}
  .reg-rasgos{gap:16px}
  .reg-rasgo-ico{width:48px;height:48px}
  .reg-rasgo-ico svg{width:24px;height:24px}
  .reg-rasgos span{max-width:none}
  .reg-tarjeta{padding:22px 16px 18px}
  .reg-tarjeta h1{font-size:28px}
  .reg-sub .reg-salto{display:inline}
  .reg-incluye{flex-direction:column;align-items:flex-start;gap:12px;margin-left:0;width:100%;padding:14px 16px}
  .reg-incluye ul{grid-template-columns:1fr;gap:10px}
  .reg-fila{grid-template-columns:1fr;gap:16px}
}