/* Formulario público de registro de proveedores. Phone-first. Los colores salen de marca.css (--tm-*).
   Movimiento: solo transform y opacity. Curvas: --sale (ease-out fuerte, para lo que entra o sale) y --resorte
   (pasa un poco y vuelve, para el tilde y el festejo). Con "reducir movimiento" queda solo algún fundido. */
:root{--sale:cubic-bezier(.23,1,.32,1);--resorte:cubic-bezier(.34,1.56,.64,1);--puerta:cubic-bezier(.45,.05,.25,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tm-cemento);color:var(--tm-tinta);font-family:var(--tm-texto);font-size:17px;line-height:1.45}

.franja{display:flex;align-items:center;justify-content:center;padding:12px 16px}
.logo{display:block;height:auto;max-width:60%}

.hoja{max-width:480px;margin:0 auto;padding:16px 16px 40px}
#modo-prueba{margin-bottom:12px;font-size:14px}
.panel{padding:22px 18px 24px;border-radius:14px}
.titulo{margin:0 0 8px;font-family:var(--tm-titulo);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:.01em}
.titulo:focus{outline:none}
.bajada{margin:0 0 20px;color:var(--tm-grafito)}

.campo{margin-bottom:16px}
.campo label{display:block;margin-bottom:6px;font-weight:600}
input[type=text],input[type=tel]{width:100%;min-height:52px;padding:10px 14px;border:2px solid var(--tm-borde);border-radius:12px;
  background:var(--tm-papel);color:var(--tm-tinta);font:inherit;font-size:18px}
input[type=text]:focus,input[type=tel]:focus{outline:3px solid var(--tm-neon);outline-offset:1px;border-color:var(--tm-tinta)}
.campo.con-error input{border-color:var(--tm-resta);background:var(--tm-resta-fondo)}

/* Tilde al completar bien un campo: aparece con un resorte corto, se va con un fundido */
.entrada{position:relative}
.entrada input{padding-right:48px}
.tilde{position:absolute;right:14px;top:50%;width:26px;height:26px;margin-top:-13px;pointer-events:none;
  fill:none;stroke:var(--tm-verde);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.6) rotate(-14deg);transition:opacity 140ms ease-out,transform 140ms ease-out}
.campo.bien .tilde{opacity:1;transform:none;transition:opacity 160ms ease-out,transform 280ms var(--resorte)}

.error{margin:6px 0 0;color:var(--tm-resta);font-weight:600;font-size:15px}
.error:empty,.aviso:empty{display:none}
.aviso{margin:6px 0 0;color:var(--tm-verde-oscuro);font-weight:600;font-size:15px}
.aviso .num{white-space:nowrap}
.error-envio{margin:0 0 12px;padding:10px 12px;background:var(--tm-resta-fondo);border-radius:10px}
.error-envio:empty{display:none}

.casilla{display:flex;align-items:center;gap:12px;min-height:52px;margin:4px 0 18px;padding:8px 12px;background:var(--tm-fondo);border-radius:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform 140ms var(--sale)}
.casilla:active{transform:scale(.985)}
.casilla input{flex:none;width:26px;height:26px;margin:0;accent-color:var(--tm-verde)}

.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Botón redondo y con canto: al tocarlo baja y se achica apenas (140 ms), como una tecla de chapa */
.boton{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:12px 22px;border:0;border-radius:999px;
  background:var(--tm-verde);color:var(--tm-papel);font-family:var(--tm-titulo);font-size:20px;letter-spacing:.03em;cursor:pointer;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 0 var(--tm-verde-oscuro);touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform 140ms var(--sale)}
.boton:active{transform:translateY(3px) scale(.98);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 var(--tm-verde-oscuro)}
.boton:disabled{background:var(--tm-suave);box-shadow:0 4px 0 var(--tm-grafito);cursor:default;transform:none}
.boton:focus-visible{outline:3px solid var(--tm-tinta);outline-offset:3px}
.boton-link{margin-top:6px}

/* Pantalla final: entra subiendo, tilde grande con resorte y siete chispas */
.final:not([hidden]){animation:entrar 320ms var(--sale) both}
.festejo{position:relative;width:76px;height:76px;margin:2px auto 14px}
.festejo-tilde{display:block;width:76px;height:76px;animation:festejo 560ms 80ms both}
.festejo-tilde circle{fill:var(--tm-verde);stroke:var(--tm-neon);stroke-width:3}
.festejo-tilde path{fill:none;stroke:var(--tm-papel);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.festejo i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--tm-neon);opacity:0;
  animation:chispa 560ms 180ms var(--sale) forwards}
.festejo i:nth-child(odd){background:var(--tm-mat-bronce-luz)}
@keyframes entrar{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes festejo{0%{opacity:0;transform:scale(.5);animation-timing-function:var(--sale)}
  60%{opacity:1;transform:scale(1.1);animation-timing-function:ease-in-out}100%{opacity:1;transform:scale(1)}}
@keyframes chispa{0%{opacity:1;transform:translate(0,0) scale(1)}45%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}}

/* ---------- Intro: la puerta de chapa (3,2 s en total; Fer pidió más tiempo el 26/10) ----------
   0 a 1000 ms   tres golpes desde adentro: la puerta tiembla, la abolladura crece, la luz neón parpadea
   300, 620, 950 ms  chispas y destello en cada golpe (8, 12 y 22 chispas: la última ráfaga es la que rompe)
   1000 a 1900   las dos hojas se abren en 3D hacia quien mira (curva de puerta pesada: arranca lento, abre y frena)
   1100 a 2000   sale el logo con rebote y queda quieto
   2800 a 3200   se funde todo y queda el formulario */
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;touch-action:none;cursor:pointer;
  background:radial-gradient(circle at 50% 45%,var(--tm-chapa-2),#0B0D0E 70%)}
.intro.corre{animation:intro-fuera 400ms 2800ms var(--sale) forwards}
.intro.salteada{opacity:0;pointer-events:none;transition:opacity 140ms ease-out;animation:none}
.puerta{position:absolute;inset:0}
.puerta-golpe{position:absolute;inset:0;perspective:900px;z-index:2}
.hoja-puerta{position:absolute;top:0;bottom:0;width:50%;backface-visibility:hidden;background-color:var(--tm-chapa-2);
  background-image:
    radial-gradient(circle,#C9CFD3 0 1.6px,#6B7378 2.6px,rgba(0,0,0,.55) 3.6px,transparent 4.6px),
    radial-gradient(circle,#C9CFD3 0 1.6px,#6B7378 2.6px,rgba(0,0,0,.55) 3.6px,transparent 4.6px),
    linear-gradient(transparent 31%,rgba(0,0,0,.4) 31% 31.7%,rgba(255,255,255,.07) 31.7% 32.4%,transparent 32.4% 67.6%,rgba(0,0,0,.4) 67.6% 68.3%,rgba(255,255,255,.07) 68.3% 69%,transparent 69%),
    var(--tm-textura);
  background-size:14px 42px,14px 42px,100% 100%,auto;
  background-repeat:repeat-y,repeat-y,no-repeat,repeat;
  background-position:6px 12px,calc(100% - 6px) 12px,0 0,0 0;
  box-shadow:inset 0 0 0 1px var(--tm-chapa-borde),inset 0 0 60px rgba(0,0,0,.5)}
.hoja-puerta.izq{left:0;transform-origin:left center;border-right:2px solid #0B0D0E}
.hoja-puerta.der{right:0;transform-origin:right center;border-left:1px solid var(--tm-chapa-borde)}
.abolladura{position:absolute;left:50%;top:44%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 44% 42%,rgba(255,255,255,.16) 0 7%,rgba(0,0,0,.7) 20%,rgba(0,0,0,.4) 44%,rgba(255,255,255,.09) 58%,transparent 68%)}
.abolladura svg{width:100%;height:100%;fill:none;stroke-linecap:round}
.abolladura .grieta{stroke:#050607;stroke-width:2.4}
.abolladura .grieta-luz{stroke:rgba(255,255,255,.22);stroke-width:1.4}
.luz{position:absolute;left:50%;top:18%;width:10px;height:54px;margin-left:-5px;border-radius:5px;opacity:0;
  background:var(--tm-neon);box-shadow:0 0 14px 4px rgba(47,192,11,.55),0 0 2px 1px var(--tm-neon-texto)}
.intro-logo{position:absolute;left:50%;top:44%;width:240px;height:194px;margin:-97px 0 0 -120px;transform-origin:center;z-index:1;opacity:0}
.chispas{position:absolute;left:50%;top:44%;width:0;height:0;z-index:3}
.chispas i{position:absolute;left:0;top:-1px;height:2px;width:24px;border-radius:2px;opacity:0;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,140,40,0),#FF9A3C 45%,#FFE6A3 80%,#FFFFFF);
  box-shadow:0 0 6px 1px rgba(255,170,70,.75)}
.chispas i.fuerte{height:3px;top:-1.5px}
.destello{position:absolute;left:50%;top:44%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;opacity:0;z-index:3;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,214,140,.7) 16%,rgba(255,140,40,.25) 38%,transparent 64%)}

.corre .luz{animation:luz 1000ms linear forwards}
.corre .puerta-golpe{animation:golpe 1000ms forwards}
.corre .abolladura{animation:abolla 1100ms forwards}
.corre .chispas i{animation-name:chispa-real;animation-timing-function:cubic-bezier(.2,.7,.4,1);animation-fill-mode:forwards}
.corre .destello{animation:destello 1000ms linear forwards}
.corre .hoja-puerta.izq{animation:abrir-izq 900ms 1000ms var(--puerta) forwards}
.corre .hoja-puerta.der{animation:abrir-der 900ms 1000ms var(--puerta) forwards}
.corre .intro-logo{animation:logo 900ms 1100ms forwards}

@keyframes intro-fuera{to{opacity:0}}
/* chispa real: raya que sale disparada (punta blanca, cola naranja), cae por el peso y se apaga */
@keyframes chispa-real{
  0%{opacity:1;transform:translate(0,0) rotate(var(--a)) scaleX(.2)}
  18%{opacity:1;transform:translate(calc(var(--dx) * .4),calc(var(--dy) * .4 + var(--g) * .04)) rotate(var(--a)) scaleX(1)}
  55%{opacity:.95;transform:translate(calc(var(--dx) * .8),calc(var(--dy) * .8 + var(--g) * .35)) rotate(calc((var(--a) + var(--a2)) / 2)) scaleX(.85)}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + var(--g))) rotate(var(--a2)) scaleX(.25)}}
/* un destello en la grieta con cada golpe (30, 62 y 95 % de 1 s, igual que "golpe") */
@keyframes destello{
  0%,28%{opacity:0;transform:scale(.4)}31%{opacity:.8;transform:scale(.9)}40%{opacity:0;transform:scale(1.1)}
  60%{opacity:0;transform:scale(.4)}63%{opacity:.9;transform:scale(1)}72%{opacity:0;transform:scale(1.2)}
  93%{opacity:0;transform:scale(.5)}96%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes luz{0%{opacity:0}8%{opacity:1}30%{opacity:.2}36%{opacity:1}62%{opacity:.2}68%{opacity:1}94%{opacity:1}100%{opacity:0}}
@keyframes golpe{
  0%,26%{transform:none}
  30%{transform:translate(-4px,1px) scale(.993);animation-timing-function:var(--sale)}
  42%,58%{transform:none}
  62%{transform:translate(5px,-1px) scale(.988);animation-timing-function:var(--sale)}
  76%,91%{transform:none}
  95%{transform:translate(-7px,2px) scale(.98);animation-timing-function:var(--sale)}
  100%{transform:none}}
@keyframes abolla{
  0%,26%{opacity:0;transform:scale(.4)}
  28%{opacity:.55;transform:scale(.6)}
  58%{opacity:.6;transform:scale(.62)}
  60%{opacity:.85;transform:scale(.82)}
  83%{opacity:.85;transform:scale(.84)}
  86%{opacity:1;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.15)}}
@keyframes abrir-izq{from{transform:rotateY(0)}to{transform:rotateY(-110deg)}}
@keyframes abrir-der{from{transform:rotateY(0)}to{transform:rotateY(110deg)}}
@keyframes logo{
  0%{opacity:0;transform:translateY(22px) scale(.55);animation-timing-function:var(--sale)}
  55%{opacity:1;transform:translateY(-6px) scale(1.08);animation-timing-function:ease-in-out}
  78%{opacity:1;transform:translateY(0) scale(.97);animation-timing-function:ease-out}
  100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .intro{display:none!important}
  .boton,.casilla{transition:none}
  .boton:active,.casilla:active{transform:none}
  .tilde,.campo.bien .tilde{transform:none;transition:opacity 120ms ease-out}
  .final:not([hidden]){animation:aparecer 160ms ease-out both}
  .festejo-tilde{animation:none}
  .festejo i{display:none}
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
[hidden]{display:none!important}