/* Desplazamiento - Desplazar el contenido*/
.sectorConDesplV {overflow-y: auto;}

/* Animación - Estados */
@keyframes latido		  {0% {scale: 1.1;}             100% {scale: 1.15;}}

@keyframes aparece        {0% {opacity: 0;}           100% {opacity: 1;}}
@keyframes desaparece     {0% {opacity: 1;}           100% {opacity: 0; display: none;}}

@keyframes aumenta        {0% {scale: 0;}             100% {scale: 1;}}
@keyframes disminuye      {0% {scale: 1;}             100% {scale: 0;}}

@keyframes aumentaCn      {0% {transform: scaleY(0.4);} 100% {transform: scaleY(1);}}

@keyframes aumentaX       {0% {transform: scaleX(0);} 100% {transform: scaleX(1);}}
@keyframes disminuyeX     {0% {transform: scaleX(1);} 100% {transform: scaleX(0);}}

@keyframes derechaX		  {0% {translate: 0 0;}		  100% {translate: 135px 0;}}
@keyframes izquierdaX     {0% {translate: 135px 0;}	  100% {translate: 0 0; scale: 1;}}

@keyframes flechaAbajo    {0% {rotate: 270deg;} 100% {rotate: 360deg;}}
@keyframes flechaDer      {0% {rotate: 360deg;} 100% {rotate: 270deg;}}

/* Animación - Duración */
.latido {animation: latido .8s infinite alternate;}

.aparece {animation: aparece .5s;}
.desaparece {animation: desaparece.5s;}

.aumenta {animation: aumenta 300ms;}
.disminuye {animation: disminuye .5s;}

.aumentaCn {animation: aumentaCn 400ms;}

.aumentaX {animation: aumentaX .3s;}
.disminuyeX {animation: disminuyeX .3s;}

.derechaX {animation: derechaX .3s;}
.izquierdaX {animation: izquierdaX .3s;}

.flechaAbajo {animation: flechaAbajo .3s;}
.flechaDer {animation: flechaDer .3s;}

/* Animación - Estilos */
.aparece, .desaparece,
.aumenta, .disminuye,
.aumentaCn,
.aumentaX, .disminuyeX,
.derechaX, .izquierdaX,
.flechaDer, .flechaAbajo
	{animation-timing-function: ease-in; animation-fill-mode: forwards;}

/* Hover - scale */
header *, main * {transition: 200ms;}
:where(.scaleCh, #encabezado a button, #links a):not(.inactivo, .inactivoVersion):hover {scale: 1.1}
#sectorIconos .iconos > *:not(.inactivo, .inactivoVersion):hover {scale: 1.3;}
:where(.scale:not(.inactivo), nav.scaleChildren > *, #iconosCartel a):hover {scale: 1.3;}
