/* ============================================================
   CARGA TIPO TABLERO (home, herramientas y soporte)
   Como las pantallas del Roadster: el bloque aparece primero vacío (marco, fondos y
   píldoras), los números grandes entran con un eco que se junta, y los textos se
   escriben letra por letra, de arriba a la izquierda hacia abajo a la derecha.
   Sólo con html.tc, que lo pone ui/carga.js si hay movimiento permitido.
   ============================================================ */

/* el marco del bloque: el gesto aprobado (200 ms, easeOut, 8 px), sin el desenfoque */
.tc .reveal{opacity:0;transform:translateY(8px);filter:none;
  transition:opacity .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1)}
.tc .reveal.in{opacity:1;transform:none}

/* texto que todavía no se escribió. El texto real no se toca: lo escribe una capa encima
   (traducción, buscadores y lectores de pantalla siguen leyendo el original) */
.tc-vacio,.tc-vacio *:not(.tc-eco):not(.tc-eco *){color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important}
.tc-vacio .grad:not(.tc-eco *){visibility:hidden}
.tc-oculto{visibility:hidden}
.tc-oculto svg{visibility:visible}
/* la capa va dentro del texto real (hereda su letra y su contexto) y se ve aunque él esté oculto */
.tc-eco{position:absolute;z-index:1;visibility:visible;pointer-events:none;margin:0;padding:0;border:0;
  background:none;box-shadow:none;overflow:visible}
.tc-eco .tc-falta,.tc-eco img{visibility:hidden!important}

/* páginas sin .reveal: el script del <head> pone html.tc-pre y tapa los bloques hasta que
   carga.js los prepara (unos milisegundos). Si carga.js no llegara, a los 2,5 s se ven igual */
@keyframes tc-seguro{to{visibility:visible}}
html.tc-pre [data-carga]{visibility:hidden;animation:tc-seguro 0s 2.5s forwards}

/* textos largos: no se escriben, aparecen con el gesto aprobado (200 ms, easeOut, 8 px) */
@keyframes tc-funde{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tc-funde{animation:tc-funde .2s cubic-bezier(0,0,.2,1) both}

/* imágenes y adornos: entran después del marco. Con una animación y NO con transition: una
   transition acá reemplazaba la que ya tenía la foto (el zoom del hover de las tarjetas de
   servicios) y el zoom saltaba de golpe. Sin .reveal en el selector: script.js le saca esa
   clase al bloque apenas termina de entrar. carga.js saca .tc-medio al terminar. */
@keyframes tc-aparece{from{opacity:0}to{opacity:1}}
.tc .tc-medio{opacity:0}
.tc .tc-medios .tc-medio{animation:tc-aparece .3s cubic-bezier(0,0,.2,1) both}

/* íconos de trazo: se dibujan */
.tc-dibujo{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s cubic-bezier(.4,0,.2,1)}
.tc-dibujar .tc-dibujo{stroke-dashoffset:0}

/* números grandes: aparecen primero, con el eco que se junta */
@keyframes tc-fantasma{
  from{opacity:0;transform:translateX(.12em);text-shadow:-.45em 0 0 rgba(234,240,246,.4),.28em 0 0 rgba(234,240,246,.22)}
  to{opacity:1;transform:none;text-shadow:0 0 0 rgba(234,240,246,0),0 0 0 rgba(234,240,246,0)}}
.tc .tc-numero{opacity:0}
.tc .tc-numeros .tc-numero{animation:tc-fantasma .28s cubic-bezier(.2,.7,.2,1) both}