/* ===================================================================
   Acompaña · movimiento
   Animacion con proposito, no decorativa. Cada transicion existe para
   contestar una pregunta que la persona se hace:

     "¿cambio algo?"        -> lo nuevo entra desde abajo
     "¿me hizo caso?"       -> lo que toco responde al instante
     "¿donde quedo el foco?" -> el borde se agranda, no parpadea

   Todo se apaga si el sistema pide menos movimiento. Se hace en CSS y
   no con una libreria porque son 0 KB de descarga: quien abre esto
   puede tener señal mala y un telefono de hace cuatro años.
   =================================================================== */

/* --- Entrada de bloques -------------------------------------------- */
@keyframes surgir{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@keyframes aparecer{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* --- Respuesta al toque --------------------------------------------
   El boton se hunde un poco al apretarlo. Es la señal mas util de
   todas: confirma que el dedo dio en el blanco, que en una pantalla
   tactil no siempre es evidente. */
.boton, .tecla, .ficha, .opcion, .nivel, .celda, .pago{
  transition:transform .12s ease, background-color .18s ease,
             border-color .18s ease, box-shadow .18s ease;
}
.boton:active, .tecla:active, .ficha:active, .nivel:active{
  transform:scale(.97);
}
.opcion:active, .pago:active{ transform:scale(.995); }

/* --- Portada --------------------------------------------------------
   Las secciones entran una detras de otra, con una diferencia apenas
   perceptible, para que la vista tenga por donde empezar a leer. */
.portada h1{ animation:surgir .5s ease both; }
.portada p.bajada{ animation:surgir .5s .08s ease both; }
.portada .acciones{ animation:surgir .5s .16s ease both; }
.portada .recuadro-foto{ animation:aparecer .7s .2s ease both; }

.tarjeta{ animation:surgir .45s ease both; }
.rejilla-3 .tarjeta:nth-child(2){ animation-delay:.07s; }
.rejilla-3 .tarjeta:nth-child(3){ animation-delay:.14s; }

.tarjeta, .servicio, .producto{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tarjeta:hover, .servicio:hover, .producto:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(21,32,43,.09);
  border-color:var(--azul);
}

/* --- Pasos del formulario ------------------------------------------
   Al pasar de un paso al siguiente, el panel entra desde abajo. Deja
   claro que se avanzo y no que la pagina se recargo. */
.panel:not(.oculto){ animation:surgir .32s ease both; }
.avance .bolita{ transition:background-color .25s ease, border-color .25s ease; }

/* --- Confirmacion ---------------------------------------------------
   El unico momento con un poco de celebracion. Se lo gano: la persona
   termino el tramite. */
@keyframes sello{
  0%{ transform:scale(.4); opacity:0; }
  60%{ transform:scale(1.08); opacity:1; }
  100%{ transform:scale(1); }
}
.visto{ animation:sello .45s cubic-bezier(.2,.8,.3,1.2) both; }
.resumen .fila{ animation:surgir .35s ease both; }
.resumen .fila:nth-child(2){ animation-delay:.05s; }
.resumen .fila:nth-child(3){ animation-delay:.1s; }
.resumen .fila:nth-child(4){ animation-delay:.15s; }
.resumen .fila:nth-child(5){ animation-delay:.2s; }
.resumen .fila:nth-child(6){ animation-delay:.25s; }
.globo{ animation:surgir .4s .3s ease both; }

/* --- Sudoku ---------------------------------------------------------
   Nada que distraiga mientras se piensa. Solo el numero que se escribe
   y el aviso de error, que tiene que notarse. */
@keyframes anotar{
  from{ transform:scale(.6); opacity:.3; }
  to{ transform:scale(1); opacity:1; }
}
.celda{ transition:background-color .15s ease; }
.celda.recien{ animation:anotar .2s ease; }
@keyframes negar{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}
.celda.mala{ animation:negar .3s ease; }
.mensaje{ animation:surgir .3s ease both; }

/* --- Carro ----------------------------------------------------------
   Cuando se agrega algo, la linea entra en la lista. Es la unica forma
   de notar que el boton hizo efecto cuando el carro esta mas abajo. */
.linea{ animation:surgir .3s ease both; }
.ahorro{ animation:aparecer .4s ease both; }

/* --- Panel ----------------------------------------------------------- */
.area section:not(.oculto){ animation:aparecer .25s ease both; }
.dato{ animation:surgir .4s ease both; }
.tarjetas .dato:nth-child(2){ animation-delay:.05s; }
.tarjetas .dato:nth-child(3){ animation-delay:.1s; }
.tarjetas .dato:nth-child(4){ animation-delay:.15s; }
.guardado{ animation:surgir .3s ease both; }

/* ===================================================================
   Quien pidio menos movimiento, no ve movimiento.
   No se trata de una preferencia estetica: hay personas a las que el
   desplazamiento en pantalla les produce mareo o malestar, y en este
   publico eso no es raro. Se apaga todo, sin excepciones.
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .tarjeta:hover, .servicio:hover, .producto:hover{ transform:none; }
  .boton:active, .tecla:active, .ficha:active, .nivel:active{ transform:none; }
}