/* Registro. Hereda variables y tipografia de landing.css. */

.ya-tengo{font-size:14.5px;color:var(--tinta3)}

.reg{
  max-width:1160px;margin:0 auto;padding:30px 34px 80px;
  display:grid;grid-template-columns:.88fr 1.12fr;gap:60px;align-items:start;
}

/* ── Lado izquierdo ── */
.reg-lado{padding-top:22px}
.reg-lado h1{font-size:clamp(34px,4.2vw,50px);line-height:1.04;margin:16px 0 20px}
.reg-sub{color:var(--tinta2);font-size:17px;max-width:400px;margin-bottom:34px}

.reg-lista{list-style:none;display:flex;flex-direction:column;gap:22px;margin-bottom:36px}
.reg-lista li{display:flex;gap:14px;align-items:flex-start}
.reg-lista b{display:block;font-size:15.5px;font-weight:660;margin-bottom:3px}
.reg-lista small{color:var(--tinta2);font-size:14.5px;line-height:1.5;display:block}
.chulo{
  position:relative;width:25px;height:25px;border-radius:50%;flex-shrink:0;margin-top:1px;
  background:rgba(18,140,126,.1);border:1px solid rgba(18,140,126,.24);
}
.chulo::after{
  content:'';position:absolute;left:7.5px;top:8.5px;width:8px;height:4px;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg);
}

.reg-foto{
  border-radius:16px;overflow:hidden;border:1px solid var(--linea);
  box-shadow:0 16px 40px rgba(27,26,23,.13);margin-bottom:26px;
}
.reg-foto img{width:100%;height:190px;object-fit:cover}

.reg-cita{border-left:3px solid var(--ambar);padding:2px 0 2px 18px}
.reg-cita p{color:var(--tinta2);font-size:15.5px;font-style:italic;margin-bottom:8px}
.reg-cita span{font-size:13.5px;color:var(--tinta3);font-weight:620}

/* ── Caja del formulario ── */
.reg-caja{
  background:#fff;border:1px solid var(--linea);border-radius:20px;
  padding:38px 36px;box-shadow:0 20px 50px rgba(27,26,23,.09);
}
.pasos-mini{display:flex;gap:7px;margin-bottom:24px}
.pm{height:3.5px;flex:1;border-radius:3px;background:var(--linea);transition:background .45s}
.pm.activo{background:var(--ambar)}

.reg-tit{font-size:26px;font-weight:780;letter-spacing:-1px;margin-bottom:8px}
.reg-tit-sub{color:var(--tinta2);font-size:15px;margin-bottom:28px}

/* ── Campos ── */
.campo{margin-bottom:20px;position:relative}
.campo label{display:block;font-size:13.5px;font-weight:650;margin-bottom:8px}
.campo label i{color:var(--ambar);font-style:normal}
.opcional{
  font-size:11.5px;font-weight:500;color:var(--tinta3);
  background:var(--papel2);padding:2px 8px;border-radius:5px;margin-left:6px;
}
.campo input,.campo textarea{
  width:100%;background:var(--papel);border:1.5px solid var(--linea);border-radius:10px;
  padding:13px 15px;color:var(--tinta);font-size:15.5px;font-family:inherit;
  transition:border-color .22s,box-shadow .22s,background .22s;outline:none;resize:vertical;
}
.campo input::placeholder,.campo textarea::placeholder{color:#b3aa9b}
.campo input:focus,.campo textarea:focus{
  border-color:var(--ambar);background:#fff;box-shadow:0 0 0 3.5px rgba(194,65,12,.11);
}
.campo.malo input,.campo.malo textarea,.campo.malo .tel-caja{
  border-color:#dc2626;box-shadow:0 0 0 3.5px rgba(220,38,38,.09);
}
.campo.bien input,.campo.bien .tel-caja{border-color:rgba(18,140,126,.55)}
.error{display:none;color:#b91c1c;font-size:12.5px;margin-top:7px;animation:tiembla .34s ease}
.campo.malo .error{display:block}
@keyframes tiembla{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:15px}

/* Telefono con indicativo */
.tel-caja{
  display:flex;align-items:center;background:var(--papel);
  border:1.5px solid var(--linea);border-radius:10px;
  transition:border-color .22s,box-shadow .22s,background .22s;
}
.tel-caja:focus-within{border-color:var(--ambar);background:#fff;box-shadow:0 0 0 3.5px rgba(194,65,12,.11)}
.indicativo{
  padding:13px 12px 13px 15px;font-size:15.5px;color:var(--tinta2);white-space:nowrap;
  border-right:1px solid var(--linea);margin-right:11px;
}
.tel-caja input{border:0;background:none;box-shadow:none!important;padding-left:0}

/* Sectores */
.selector{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0}
.op{
  background:var(--papel);border:1.5px solid var(--linea);color:var(--tinta2);
  font-size:13.5px;font-family:inherit;font-weight:560;padding:9px 15px;
  border-radius:9px;cursor:pointer;
  transition:transform .18s,border-color .2s,background .2s,color .2s;
}
.op:hover{border-color:var(--linea2);color:var(--tinta);transform:translateY(-1.5px)}
.op.elegida{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
#sectorOtro{margin-top:10px}
.oculto{display:none}

.contador{display:block;text-align:right;font-size:12px;color:var(--tinta3);margin-top:6px}

#enviar{margin-top:8px}
#enviar[disabled]{opacity:.72;cursor:wait;transform:none!important}
.rueda{
  display:none;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:gira .7s linear infinite;position:relative;z-index:1;
}
@keyframes gira{to{transform:rotate(360deg)}}
#enviar.cargando .rueda{display:block}
#enviar.cargando .flecha{display:none}

.aviso{font-size:12.5px;color:var(--tinta3);text-align:center;margin-top:18px;line-height:1.5}

/* ── Contraseña ── */
.clave-caja{position:relative;display:flex;align-items:center}
.clave-caja input{padding-right:44px}
.ver-clave{
  position:absolute;right:5px;width:33px;height:33px;border-radius:8px;
  background:transparent;border:0;color:var(--tinta3);cursor:pointer;
  display:grid;place-items:center;transition:color .2s,background .2s;
}
.ver-clave:hover{color:var(--tinta);background:var(--papel2)}
.ver-clave.activo{color:var(--ambar)}

.fuerza{display:flex;align-items:center;gap:10px;margin-top:8px}
.fuerza[hidden]{display:none}
.fuerza-barra{
  flex:1;height:4px;border-radius:3px;background:var(--linea);overflow:hidden;
}
.fuerza-barra i{
  display:block;height:100%;width:0;border-radius:3px;
  transition:width .35s cubic-bezier(.4,0,.2,1),background .3s;
}
.fuerza span{font-size:12px;font-weight:620;white-space:nowrap;min-width:52px}
.fuerza.f1 .fuerza-barra i{width:33%;background:#dc2626}
.fuerza.f1 span{color:#b91c1c}
.fuerza.f2 .fuerza-barra i{width:66%;background:#d97706}
.fuerza.f2 span{color:#b45309}
.fuerza.f3 .fuerza-barra i{width:100%;background:var(--verde)}
.fuerza.f3 span{color:var(--verde)}

/* ── Paso 2: código de verificación ── */
.verificar{display:none;text-align:center;padding:8px 0 4px}
.verificar.visible{display:block;animation:entraPaso .45s cubic-bezier(.2,.8,.3,1.05) both}
@keyframes entraPaso{from{opacity:0;transform:translateX(22px)}}

.ver-icono{
  width:66px;height:66px;border-radius:18px;margin:0 auto 20px;
  display:grid;place-items:center;color:var(--ambar);
  background:rgba(194,65,12,.08);border:1px solid rgba(194,65,12,.2);
  animation:pumIcono .55s cubic-bezier(.2,.9,.3,1.5) .1s both;
}
@keyframes pumIcono{from{transform:scale(.5);opacity:0}}
.ver-tit{font-size:25px;font-weight:790;letter-spacing:-1px;margin-bottom:9px}
.ver-sub{font-size:15px;color:var(--tinta2);line-height:1.6;margin-bottom:26px}
.ver-sub b{color:var(--tinta);word-break:break-all}

.digitos{display:flex;gap:9px;justify-content:center;margin-bottom:18px}
.digitos input{
  width:48px;height:60px;text-align:center;
  font-size:25px;font-weight:700;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  color:var(--tinta);background:var(--papel);
  border:1.5px solid var(--linea);border-radius:11px;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s,transform .15s;
}
.digitos input:focus{
  border-color:var(--ambar);background:#fff;
  box-shadow:0 0 0 3.5px rgba(194,65,12,.12);transform:translateY(-2px);
}
.digitos input.puesto{border-color:var(--linea2);background:#fff}
.digitos.malo input{
  border-color:#dc2626;
  animation:tiemblaDig .38s ease;
}
@keyframes tiemblaDig{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}
}

.ver-error{
  background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.22);
  color:#b91c1c;font-size:13.5px;border-radius:9px;padding:10px 14px;margin-bottom:16px;
}
.ver-error[hidden]{display:none}

.ver-pie{font-size:14px;color:var(--tinta2);margin-top:18px}
.enlace{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--ambar);font-weight:640;text-decoration:underline;
}
.enlace:disabled{color:var(--tinta3);cursor:default;text-decoration:none}
.ver-espera{color:var(--tinta3);font-size:13.5px}
.ver-espera[hidden]{display:none}
.ver-nota{font-size:12.5px;color:var(--tinta3);margin-top:12px;line-height:1.5}

@media(max-width:480px){
  .digitos{gap:6px}
  .digitos input{width:42px;height:54px;font-size:22px}
}

/* ── Éxito ── */
.listo{display:none;text-align:center;padding:20px 0 8px}
.listo.visible{display:block;animation:apareceListo .55s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes apareceListo{from{opacity:0;transform:scale(.95)}}
.chulo-grande{
  width:84px;height:84px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;
  color:var(--verde);background:rgba(18,140,126,.09);border:1.5px solid rgba(18,140,126,.26);
  animation:pum .7s cubic-bezier(.2,.9,.3,1.5) .12s both;
}
@keyframes pum{from{transform:scale(0);opacity:0}}
.listo h2{font-size:27px;margin-bottom:12px;letter-spacing:-1px}
.listo p{color:var(--tinta2);font-size:15.5px;max-width:390px;margin:0 auto 30px}
.listo b{color:var(--tinta)}
.listo-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:940px){
  .reg{grid-template-columns:1fr;gap:44px;padding-top:18px}
  .reg-lado{padding-top:0}
  .reg-foto{display:none}
}
@media(max-width:600px){
  .ya-tengo{display:none}
  .reg{padding:18px 20px 60px}
  .reg-caja{padding:26px 21px;border-radius:16px}
  .dos{grid-template-columns:1fr;gap:0}
}


/* ── Subir el PDF de instrucciones ── */
.soltar-pdf{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;
  border:1.5px dashed rgba(0,0,0,.18);border-radius:12px;transition:.16s;background:rgba(0,0,0,.015)}
.soltar-pdf:hover{border-color:var(--acento,#c0502a);background:rgba(192,80,42,.05)}
.soltar-pdf.puesto{border-style:solid;border-color:#16a34a;background:rgba(22,163,74,.07)}
.soltar-pdf.leyendo{opacity:.6;cursor:progress}
.soltar-ico{font-size:20px;line-height:1}
.soltar-txt{font-size:13.5px;font-weight:600}
.pista-pdf{display:block;margin-top:7px;font-size:12px;opacity:.65;line-height:1.45}